mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
1970 lines
45 KiB
CSS
1970 lines
45 KiB
CSS
/* CSS PORK MORT - CAP DE PORC */
|
|
/* Character sheet for ROll20 by VJ Rolmasters*/
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Manufacturing+Consent&display=swap');
|
|
|
|
/*============= FONTS CSS =============*/
|
|
.jetbrains-mono- {
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-optical-sizing: auto;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
.manufacturing-consent-regular {
|
|
font-family: "Manufacturing Consent", system-ui;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
/*=================== TABS MENU CSS ===================*/
|
|
|
|
.sheet-center-menu{
|
|
float: none;
|
|
width: 100%;
|
|
height: auto;
|
|
margin: 0px auto ;
|
|
}
|
|
|
|
/* configure the tab buttons */
|
|
.charsheet .sheet-personaje,
|
|
.charsheet .sheet-combat,
|
|
.charsheet .sheet-class,
|
|
.charsheet .sheet-items,
|
|
.charsheet .sheet-magia{
|
|
display: none;
|
|
}
|
|
|
|
/* style the active button */
|
|
.charsheet .sheet-tabstoggle[value="personaje"] ~ div .sheet-button0 {background-color: #e97365 !important; color: #ffff00 !important;}
|
|
.charsheet .sheet-tabstoggle[value="combat"] ~ div .sheet-button1 {background-color: #e97365 !important; color: #ffff00 !important;}
|
|
.charsheet .sheet-tabstoggle[value="class"] ~ div .sheet-button2 {background-color: #e97365 !important; color: #ffff00 !important;}
|
|
.charsheet .sheet-tabstoggle[value="items"] ~ div .sheet-button3 {background-color: #e97365 !important; color: #ffff00 !important;}
|
|
.charsheet .sheet-tabstoggle[value="magia"] ~ div .sheet-button4 {background-color: #e97365 !important; color: #ffff00 !important;}
|
|
|
|
/* show the selected tab */
|
|
.charsheet .sheet-tabstoggle[value="personaje"] ~ div.sheet-personaje,
|
|
.charsheet .sheet-tabstoggle[value="combat"] ~ div.sheet-combat,
|
|
.charsheet .sheet-tabstoggle[value="class"] ~ div.sheet-class,
|
|
.charsheet .sheet-tabstoggle[value="items"] ~ div.sheet-items,
|
|
.charsheet .sheet-tabstoggle[value="magia"] ~ div.sheet-magia{
|
|
display: block;
|
|
}
|
|
|
|
.sheet-button0,
|
|
.sheet-button1,
|
|
.sheet-button2,
|
|
.sheet-button3,
|
|
.sheet-button4 {
|
|
width: auto;
|
|
height: 24px;
|
|
background: #7fc8c7;
|
|
color: #ffff00;
|
|
margin: 0 0 0 5px;
|
|
padding: 8px 32px 8px;
|
|
text-align: center;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 22px;
|
|
border: 2px solid #ffff00;
|
|
|
|
/* Bordes redondeados compatibles */
|
|
border-radius: 5px;
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
|
|
/* Transición suave para el hover */
|
|
transition: all 0.2s ease-in-out;
|
|
-webkit-transition: all 0.2s ease-in-out;
|
|
-moz-transition: all 0.2s ease-in-out;
|
|
|
|
/* Cursor tipo botón */
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sheet-button0:hover,
|
|
.sheet-button1:hover,
|
|
.sheet-button2:hover,
|
|
.sheet-button3:hover,
|
|
.sheet-button4:hover{
|
|
width: auto;
|
|
height: 24px;
|
|
background: #ffff00;
|
|
color: #000000;
|
|
margin: 0px 0px 0px 5px;
|
|
padding: 8px 32px 8px;
|
|
text-align: center;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 22px;
|
|
border: 2px solid #000000;
|
|
}
|
|
|
|
.sheet-button0,
|
|
.sheet-button0:hover,
|
|
.sheet-button0:active{
|
|
margin-left: 35px;
|
|
}
|
|
|
|
/*============= CONTENEDORES Y COLUMNAS CSS =============*/
|
|
|
|
.sheet-clearfloat {
|
|
clear:both;
|
|
height:0;
|
|
font-size: 0px;
|
|
line-height:0px;
|
|
}
|
|
|
|
.sheet-contenedorvj{
|
|
position:relative;
|
|
float:left;
|
|
width:860px;
|
|
max-width: 860px;
|
|
height:auto;
|
|
min-height: 600px;
|
|
margin: 0px auto;
|
|
padding: 0px 0px;
|
|
}
|
|
|
|
|
|
/*============= TOP PART FIXE BLOC 1 : COLUMNA A CSS =============*/
|
|
|
|
.sheet-bloc1{
|
|
position: relative;
|
|
float: left;
|
|
width: 840px;
|
|
height: auto;
|
|
min-height: 630px;
|
|
margin: 0px auto ;
|
|
}
|
|
|
|
|
|
.sheet-logo{
|
|
position: relative;
|
|
float: left;
|
|
width: 420px;
|
|
height: auto;
|
|
min-height: 150px;
|
|
margin: 0px auto ;
|
|
}
|
|
.sheet-bloc1columnA{
|
|
position: relative;
|
|
float: left;
|
|
width: 420px;
|
|
height: auto;
|
|
min-height: 630px;
|
|
margin: 0px auto ;
|
|
background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/PORK_MORT_BLOC1_PETIT_A1_420px.jpg");
|
|
background-repeat:no-repeat;
|
|
background-size:auto;
|
|
background-position: top;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
.sheet-atributscolumn{
|
|
position: relative;
|
|
float: left;
|
|
width: 390px;
|
|
height: auto;
|
|
min-height: 175px;
|
|
margin: 0px 0px 0px 30px ;
|
|
}
|
|
|
|
.sheet-atributbox{
|
|
position: relative;
|
|
float: left;
|
|
width: 95px;
|
|
height: auto;
|
|
min-height: 175px;
|
|
margin: 0px auto ;
|
|
}
|
|
.sheet-atributnumero{
|
|
position: relative;
|
|
float: left;
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 110px;
|
|
margin: 0px auto ;
|
|
}
|
|
.sheet-valorcaracteristicas1{
|
|
float: left;
|
|
width: 45px !important;
|
|
height: 40px !important;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-right: none;
|
|
border-bottom: none !important;
|
|
outline: 0px;
|
|
text-align: center; background-color: transparent !important; font-weight: bold; font-size: 28px; font-family: "JetBrains Mono", monospace; color:#000000;
|
|
-webkit-inner-spin-button: none;
|
|
-webkit-outer-spin-button: none;
|
|
-moz-appearance: textfield;
|
|
-webkit-appearance: none;
|
|
}
|
|
.sheet-atributtitol{
|
|
position: relative;
|
|
float: left;
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 25px;
|
|
margin: 0px auto ;
|
|
text-align: center;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
}
|
|
.sheet-atributdau{
|
|
position: relative;
|
|
float: left;
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 35px;
|
|
margin: 0px auto ;
|
|
}
|
|
|
|
|
|
.sheet-titoldificultat{
|
|
position: relative;
|
|
float: left;
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 25px;
|
|
margin: 0px auto ;
|
|
text-align: center;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #2f2b3c;
|
|
}
|
|
|
|
.sheet-selectoraccions{
|
|
float: left;
|
|
width: 180px;
|
|
height: 30px!important;
|
|
margin: 2px 0px 0px 20px !important;
|
|
padding: 0px 0px;
|
|
text-align: center;
|
|
color:#ffff00;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 12px;
|
|
border: 1px solid #ffff00;
|
|
background-color: #2f2b3c;
|
|
}
|
|
.sheet-selectordau{
|
|
float:right;
|
|
width: 80px;
|
|
height: 30px!important;
|
|
margin: 2px 5px 0px 0px !important;
|
|
padding: 0px 0px;
|
|
text-align: center;
|
|
color:#ffff00;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 12px;
|
|
border: 1px solid #ffff00;
|
|
background-color: #2f2b3c;
|
|
}
|
|
|
|
.sheet-demonbox{
|
|
position: relative;
|
|
float: left;
|
|
width: 420px;
|
|
height: auto;
|
|
min-height: 210px;
|
|
margin: 0px auto ;
|
|
overflow-y: auto;
|
|
scrollbar-color: #2f2b3c transparent; /* thumb marró, track transparent */
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
|
|
/*============= TOP PART FIXE BLOC 1 : COLUMNA B CSS =============*/
|
|
|
|
.sheet-bloc1columnB{
|
|
position: relative;
|
|
float: left;
|
|
width: 420px;
|
|
height: auto;
|
|
min-height: 630px;
|
|
margin: 0px auto ;
|
|
background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/PORK_MORT_BLOC1_PETIT_A2_420px.jpg");
|
|
background-repeat:no-repeat;
|
|
background-size:auto;
|
|
background-position: top;
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
.sheet-fotonombox{
|
|
position: relative;
|
|
float: left;
|
|
width: 290px;
|
|
height: auto;
|
|
min-height: 370px;
|
|
margin: 0px auto ;
|
|
}
|
|
|
|
.sheet-avatar-box{
|
|
float:left;
|
|
position:relative;
|
|
width:290px;
|
|
height:270px;
|
|
margin: 0% 0% 0% 0%;
|
|
padding: 0px;
|
|
}
|
|
.sheet-avatar-foto {
|
|
float: left;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: 220px;
|
|
height: auto;
|
|
min-height: 220px;
|
|
max-height: 220px;
|
|
margin: 45px 0px 0px 50px;
|
|
overflow: hidden;
|
|
border: 2px solid #2f2b3c;
|
|
}
|
|
.sheet-avatar-foto img{
|
|
float: none;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: auto;
|
|
position: relative;
|
|
margin: 0px;
|
|
padding: 0px 0px 0px 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-arbrelegend{
|
|
position: relative;
|
|
float: left;
|
|
width: 85px;
|
|
height: auto;
|
|
min-height: 370px;
|
|
margin: 0px auto ;
|
|
}
|
|
.sheet-box60{
|
|
position: relative;
|
|
float: left;
|
|
width: 60px;
|
|
height: 60px;
|
|
margin: 0px auto ;
|
|
padding: 0px 0px 0px 0px;
|
|
text-align: center;
|
|
}
|
|
.sheet-box43{
|
|
position: relative;
|
|
float: left;
|
|
width: 43px;
|
|
height: 43px;
|
|
margin: 0px auto ;
|
|
padding: 0px 0px 0px 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-legendbox{
|
|
position: relative;
|
|
float: left;
|
|
width: 25px;
|
|
height: auto;
|
|
min-height: 370px;
|
|
margin: 0px auto ;
|
|
padding: 0px 8px 0px 0px;
|
|
text-align: center;
|
|
color:#2f2b3c;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 16px;
|
|
writing-mode: vertical-rl;
|
|
text-orientation: mixed;
|
|
}
|
|
|
|
.sheet-tiradasecreta{
|
|
position: relative;
|
|
float: left;
|
|
width: 380px;
|
|
height:auto;
|
|
min-height: 35px;
|
|
margin: 5px 0px 0px 0px;
|
|
padding: 0px 0px 0px 0px;
|
|
border-top: none;
|
|
border-left: none ;
|
|
border-right: none;
|
|
border-bottom: none;
|
|
outline: 0px;
|
|
background-color: transparent;
|
|
text-align: left;
|
|
font-size: 12px;
|
|
font-family: "JetBrains Mono", monospace;
|
|
}
|
|
|
|
|
|
.sheet-puntsvida{
|
|
position: relative;
|
|
float: left;
|
|
width: 100px;
|
|
height: auto;
|
|
min-height: 200px;
|
|
margin: 0px auto ;
|
|
}
|
|
.sheet-valorpuntsvida{
|
|
float: left;
|
|
width: 50px !important;
|
|
height: 40px !important;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-right: none;
|
|
border-bottom: none !important;
|
|
outline: 0px;
|
|
text-align: center; background-color: transparent !important; font-weight: bold; font-size: 35px; font-family: "JetBrains Mono", monospace; color:#000000;
|
|
-webkit-inner-spin-button: none;
|
|
-webkit-outer-spin-button: none;
|
|
-moz-appearance: textfield;
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
.sheet-maxbox{
|
|
position: relative;
|
|
float: left;
|
|
width: 80px;
|
|
height: auto;
|
|
min-height: 40px;
|
|
margin: 50px auto 0px;
|
|
padding: 0px 0px 0px 0px;
|
|
text-align: left;
|
|
color:#2f2b3c;
|
|
font-family: "Manufacturing Consent", system-ui;
|
|
font-weight: 400;
|
|
font-size: 34px;
|
|
transform: rotate(-25deg);
|
|
-webkit-transform: rotate(-25deg); /* Safari / Chrome viejos */
|
|
-moz-transform: rotate(-25deg); /* Firefox viejos */
|
|
-ms-transform: rotate(-25deg); /* Internet Explorer 9+ */
|
|
-o-transform: rotate(-25deg); /* Opera antiguos */
|
|
transform-origin: center center;
|
|
}
|
|
|
|
|
|
.sheet-blessingbox1{
|
|
position: relative;
|
|
float: left;
|
|
width: 125px;
|
|
height: auto;
|
|
min-height: 200px;
|
|
margin: 0px auto ;
|
|
padding: 0px 0px 0px 0px;
|
|
box-sizing:border-box;
|
|
border: 1px solid #;
|
|
}
|
|
.sheet-blessingbox2{
|
|
position: relative;
|
|
float: left;
|
|
width: 45px;
|
|
height: auto;
|
|
min-height: 180px;
|
|
margin: 0px auto ;
|
|
padding: 15px 0px 0px 0px;
|
|
text-align: left;
|
|
color:#2f2b3c;
|
|
font-family: "Manufacturing Consent", system-ui;
|
|
font-weight: 400;
|
|
font-size: 36px;
|
|
writing-mode: vertical-rl;
|
|
text-orientation: mixed;
|
|
}
|
|
|
|
.sheet-titolratlla{
|
|
float: left;
|
|
width: 230px;
|
|
height:40px;
|
|
margin: 0px 0px 0px 50px;
|
|
padding: 0px 0px 0px 0px ;
|
|
text-align: left;
|
|
color:#2f2b3c;
|
|
font-family: "Manufacturing Consent", system-ui;
|
|
font-weight: 400;
|
|
font-size: 28px;
|
|
background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/PORK_MORT_BLOC1_RATLLA_TITOL_GRAN_250px.png");
|
|
background-repeat:no-repeat;
|
|
background-size:auto;
|
|
background-position: top;
|
|
}
|
|
.sheet-titolratllademon{
|
|
float: left;
|
|
width: 230px;
|
|
height:40px;
|
|
margin: 10px 0px 0px 120px;
|
|
padding: 0px 0px 0px 0px ;
|
|
text-align: left;
|
|
color:#2f2b3c;
|
|
font-family: "Manufacturing Consent", system-ui;
|
|
font-weight: 400;
|
|
font-size: 28px;
|
|
background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/PORK_MORT_BLOC1_RATLLA_TITOL_GRAN_250px.png");
|
|
background-repeat:no-repeat;
|
|
background-size:auto;
|
|
background-position: top;
|
|
}
|
|
/*============= CHECKBOXS COLORS CSS =============*/
|
|
|
|
.sheet-check-negre{
|
|
float:left;
|
|
width: 15px!important;
|
|
height: 15px!important;
|
|
color:black; accent-color:black;
|
|
border-color: black;
|
|
}
|
|
.sheet-check-morat{
|
|
float:left;
|
|
width: 15px!important;
|
|
height: 15px!important;
|
|
color:#2f2b3c; accent-color:#2f2b3c;
|
|
border-color: #ffff00;
|
|
}
|
|
.sheet-check-vermell{
|
|
float:left;
|
|
width: 15px!important;
|
|
height: 15px!important;
|
|
color:#e97365; accent-color:#e97365;
|
|
border-color: #ffff00;
|
|
}
|
|
|
|
/*============= CHECKBOX REDONDO A CSS =============*/
|
|
|
|
.sheet-check-legend {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 43px;
|
|
height: 43px;
|
|
cursor: pointer;
|
|
}
|
|
/* Ocultamos el checkbox nativo */
|
|
.sheet-check-legend input[type="checkbox"] {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
}
|
|
/* Círculo visible */
|
|
.sheet-check-legend span {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 43px;
|
|
height: 43px;
|
|
border: 2px solid black;
|
|
border-radius: 50%;
|
|
background-color: white;
|
|
box-sizing: border-box;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
/* Hover */
|
|
.sheet-check-legend:hover span {
|
|
border-color: #555;
|
|
}
|
|
/* Checkbox marcado → cambia el color del círculo */
|
|
.sheet-check-legend input[type="checkbox"]:checked + span {
|
|
background-color: #2f2b3c;
|
|
border-color: black;
|
|
}
|
|
/* Checkbox marcado → muestra el número */
|
|
.sheet-check-legend input[type="checkbox"]:checked + span::after {
|
|
content: "1";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: yellow;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
}
|
|
/* Checkbox marcado → muestra número diferente según el name del input */
|
|
.sheet-check-legend input[name="attr_legend1"]:checked + span::after {
|
|
content: "1";
|
|
}
|
|
.sheet-check-legend input[name="attr_legend2"]:checked + span::after {
|
|
content: "2";
|
|
}
|
|
.sheet-check-legend input[name="attr_legend3"]:checked + span::after {
|
|
content: "3";
|
|
}
|
|
.sheet-check-legend input[name="attr_legend4"]:checked + span::after {
|
|
content: "4";
|
|
}
|
|
/*============= CHECKBOX REDONDO GRAN A CSS =============*/
|
|
|
|
.sheet-check-legendgran {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 60px;
|
|
height: 60px;
|
|
cursor: pointer;
|
|
}
|
|
/* Ocultamos el checkbox nativo */
|
|
.sheet-check-legendgran input[type="checkbox"] {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
}
|
|
/* Círculo visible */
|
|
.sheet-check-legendgran span {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 60px;
|
|
height: 60px;
|
|
border: 2px solid black;
|
|
border-radius: 50%;
|
|
background-color: white;
|
|
box-sizing: border-box;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
/* Hover */
|
|
.sheet-check-legendgran:hover span {
|
|
border-color: #555;
|
|
}
|
|
/* Checkbox marcado → cambia el color del círculo */
|
|
.sheet-check-legendgran input[type="checkbox"]:checked + span {
|
|
background-color: #e97365;
|
|
border-color: black;
|
|
}
|
|
/* Checkbox marcado → muestra el número */
|
|
.sheet-check-legendgran input[type="checkbox"]:checked + span::after {
|
|
content: "5";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: yellow;
|
|
font-weight: bold;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 28px;
|
|
}
|
|
/*============= FIN CHEKBOX REDONDO CSS =============*/
|
|
|
|
.sheet-bloc2{
|
|
position: relative;
|
|
float: left;
|
|
width: 840px;
|
|
height: auto;
|
|
min-height: 630px;
|
|
margin: 0px auto ;
|
|
background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/PORK_MORT_BLOC2_B2_840px.jpg");
|
|
background-repeat:no-repeat;
|
|
background-size:auto;
|
|
background-position: top;
|
|
background-color: #2f2b3c;
|
|
}
|
|
|
|
|
|
.sheet-bloc2column1{
|
|
position: relative;
|
|
float: left;
|
|
width: 420px;
|
|
height: auto;
|
|
min-height: 530px;
|
|
margin: 0px auto ;
|
|
background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/PORK_MORT_FONDO_FULLA_A4_420x530px.png");
|
|
background-repeat:no-repeat;
|
|
background-size:auto;
|
|
background-position: top;
|
|
overflow-y: auto;
|
|
scrollbar-color: #2f2b3c transparent; /* thumb marró, track transparent */
|
|
scrollbar-width: thin;
|
|
}
|
|
.sheet-bloc2column2{
|
|
position: relative;
|
|
float: left;
|
|
width: 420px;
|
|
height: auto;
|
|
min-height: 530px;
|
|
margin: 0px auto ;
|
|
background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/PORK_MORT_FONDO_FULLA_A5_420x530px.png");
|
|
background-repeat:no-repeat;
|
|
background-size:auto;
|
|
background-position: top;
|
|
overflow-y: auto;
|
|
scrollbar-color: #2f2b3c transparent; /* thumb marró, track transparent */
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.sheet-bloc2columnB{
|
|
position: relative;
|
|
float: left;
|
|
width: 420px;
|
|
height: auto;
|
|
min-height: 530px;
|
|
margin: 0px auto ;
|
|
overflow-y: auto;
|
|
scrollbar-color: #2f2b3c transparent; /* thumb marró, track transparent */
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
|
|
/*============= TAB COMBAT ARMES CSS =============*/
|
|
|
|
|
|
.sheet-bloc2column1armes{
|
|
position: relative;
|
|
float: left;
|
|
width: 420px;
|
|
height: auto;
|
|
min-height: 530px;
|
|
margin: 0px auto ;
|
|
background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/PORK_MORT_FONDO_FULLA_ARMAS_A6_420x530px.png");
|
|
background-repeat:no-repeat;
|
|
background-size:auto;
|
|
background-position: top;
|
|
overflow-y: auto;
|
|
scrollbar-color: #2f2b3c transparent; /* thumb marró, track transparent */
|
|
scrollbar-width: thin;
|
|
}
|
|
.sheet-titolarmes{
|
|
float: left;
|
|
width: 230px;
|
|
height:40px;
|
|
margin: 12px 0px 10px 50px;
|
|
padding: 0px 0px 0px 0px ;
|
|
text-align: center;
|
|
color:#2f2b3c;
|
|
font-family: "Manufacturing Consent", system-ui;
|
|
font-weight: 400;
|
|
font-size: 28px;
|
|
}
|
|
|
|
.sheet-armescolumn{
|
|
float:left;
|
|
position:relative;
|
|
width:100%;
|
|
height:275px;
|
|
margin: 0px 0px;
|
|
padding: 0px 0px;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
overflow-y: auto;
|
|
scrollbar-color: #ad4c37 transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
.sheet-objetoscolumn{
|
|
float:left;
|
|
position:relative;
|
|
width:100%;
|
|
height:425px;
|
|
margin: 0px 0px;
|
|
padding: 0px 0px;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
overflow-y: auto;
|
|
scrollbar-color: #ad4c37 transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
.sheet-siurellscolumn{
|
|
float:left;
|
|
position:relative;
|
|
width:100%;
|
|
height:190px;
|
|
margin: 0px 0px;
|
|
padding: 0px 0px;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
overflow-y: auto;
|
|
scrollbar-color: #ad4c37 transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
.sheet-aliadoscolumn{
|
|
float:left;
|
|
position:relative;
|
|
width:100%;
|
|
height:190px;
|
|
margin: 0px 0px;
|
|
padding: 0px 0px;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
overflow-y: auto;
|
|
scrollbar-color: #ad4c37 transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
/*============= TAB COMBAT ARMOR CSS =============*/
|
|
|
|
.sheet-bloc2column1armor{
|
|
position: relative;
|
|
float: left;
|
|
width: 420px;
|
|
height: auto;
|
|
min-height: 530px;
|
|
margin: 0px auto ;
|
|
background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/PORK_MORT_FONDO_FULLA_ARMOR_A6_420x530px.png");
|
|
background-repeat:no-repeat;
|
|
background-size:auto;
|
|
background-position: top;
|
|
overflow-y: auto;
|
|
scrollbar-color: #2f2b3c transparent;
|
|
scrollbar-width: thin;
|
|
}
|
|
.sheet-criaturasabox{
|
|
float: left;
|
|
width: 355px;
|
|
height: 100px;
|
|
margin: 0px 0px 0px 40px;
|
|
}
|
|
.sheet-iniciativabox{
|
|
float: left;
|
|
width: 355px;
|
|
height: 120px;
|
|
margin: 0px 0px 0px 40px;
|
|
padding: 0px 0px 0px 0px ;
|
|
}
|
|
.sheet-frasebold{
|
|
float: left;
|
|
width: 320px;
|
|
height: 30px;
|
|
margin: 2px 0px 0px 5px;
|
|
padding: 0px 0px 0px 0px ;
|
|
text-align: left;
|
|
color:#2f2b3c;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
}
|
|
.sheet-defensabox{
|
|
float: left;
|
|
width: 355px;
|
|
height: 30px;
|
|
margin: 0px 0px 0px 40px;
|
|
}
|
|
.sheet-armadurabox{
|
|
float: left;
|
|
width: 355px;
|
|
height: 80px;
|
|
margin: 0px 0px 0px 40px;
|
|
}
|
|
.sheet-armaduranom{
|
|
float: left;
|
|
width: 230px !important;
|
|
height: 30px !important;
|
|
margin: 0px 0px 0px 5px;
|
|
border: none;
|
|
border-bottom: 1px solid #000 !important;
|
|
outline: none;
|
|
background: transparent !important;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
color: #2f2b3c;
|
|
appearance: textfield;
|
|
}
|
|
|
|
.sheet-armadurabotons{
|
|
float: left;
|
|
width: 220px !important;
|
|
height: 40px !important;
|
|
margin: 5px 0px 0px 15px;
|
|
border: none;
|
|
}
|
|
|
|
.sheet-escudo{
|
|
float: left;
|
|
width: auto;
|
|
min-width: 40px;
|
|
height: 30px !important;
|
|
margin: 0px 0px 0px 0px;
|
|
padding: 5px 5px 0px 5px;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
color: #2f2b3c;
|
|
appearance: textfield;
|
|
}
|
|
|
|
|
|
/*============= TAB COMBAT RADIOBOTONS ARMOR CSS =============*/
|
|
|
|
|
|
/* Contenedor general del grupo */
|
|
.sheet-armorradio {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 12px;
|
|
color: black;
|
|
}
|
|
|
|
/* Ocultamos el radio nativo */
|
|
.sheet-armorradio input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
/* Estilo base del label (simula el botón circular o cuadrado) */
|
|
.sheet-armorradio label {
|
|
position: relative;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* El “botón” visual */
|
|
.sheet-armorradio label span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 2px solid #000;
|
|
border-radius: 50%; /* Si quieres cuadrado, quita esta línea */
|
|
background-color: white;
|
|
color: black;
|
|
font-weight: bold;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
/* Hover: cambia el color del borde */
|
|
.sheet-armorradio label:hover span {
|
|
border-color: #555;
|
|
}
|
|
|
|
/* Cuando está marcado: color de fondo y texto */
|
|
.sheet-armorradio input[type="radio"]:checked + span {
|
|
background-color: #2f2b3c;
|
|
color: #ffff00;
|
|
border-color: black;
|
|
}
|
|
|
|
/* Opcional: mejora de accesibilidad */
|
|
.sheet-armorradio [role="radiogroup"] label:focus-within span {
|
|
outline: 2px solid #000;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
|
|
/*============= CLASS CSS =============*/
|
|
|
|
.sheet-barraselectraza{
|
|
float: left;
|
|
position:relative;
|
|
width: 90% !important;
|
|
height: 34px;
|
|
margin: 0px 0px 0px 5%;
|
|
padding: 0px 0px;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
color: #000000;
|
|
border: 3px solid #000000;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sheet-imagenclase {
|
|
position: relative;
|
|
float: left;
|
|
width: 400px;
|
|
height: 456px;
|
|
margin: 0px 10px;
|
|
/* text-align: center; */
|
|
min-height: 340px;
|
|
}
|
|
.sheet-razaimagen {
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 456px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/*============= PERSONAJE TAB 1 CSS =============*/
|
|
|
|
.sheet-characterinfo{
|
|
width:330px!important;
|
|
height:20px;
|
|
min-height: 20px;
|
|
max-height: 20px!important;
|
|
margin:0px 0px 0px 50px!important;
|
|
padding: 0px 0px 0px 0px;
|
|
border-top: none;
|
|
border-left: none ;
|
|
border-right: none;
|
|
border-bottom: #ccc;
|
|
outline: 0px;
|
|
text-align: left;
|
|
background-color: transparent;
|
|
font-size: 16px;
|
|
font-family: "JetBrains Mono", monospace;
|
|
resize: none;
|
|
}
|
|
|
|
/*=================== CARACTERÍSTICAS TAB 2 CSS ===================*/
|
|
|
|
.sheet-box-check5{
|
|
float: left;
|
|
width: 20px;
|
|
height: 15px;
|
|
margin: 0px 0px 0px 15px;
|
|
}
|
|
.sheet-mycheck{
|
|
float: left;
|
|
filter: hue-rotate(170deg) brightness(0.8);
|
|
}
|
|
/* filter: invert(100%) hue-rotate(1040deg) brightness(0.8); */
|
|
.sheet-mycheck:checked {
|
|
}
|
|
|
|
/*=================== COMBATE TAB 3 CSS ===================*/
|
|
|
|
|
|
.sheet-armaselect-A,
|
|
.sheet-armaselect-B {
|
|
float: left;
|
|
height: 30px !important;
|
|
margin: 0 0 0 5px !important;
|
|
border: none;
|
|
border-bottom: 1px solid #000 !important;
|
|
outline: 0;
|
|
background-color: transparent !important;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
color: #000;
|
|
-moz-appearance: textfield;
|
|
-webkit-appearance: none;
|
|
}
|
|
.sheet-armaselect-A { width: 35px !important; }
|
|
.sheet-armaselect-B { width: 115px !important; }
|
|
|
|
.sheet-item2A{
|
|
float: left;
|
|
width: 145px !important;
|
|
height: 30px !important;
|
|
margin: 0px 0px 0px 35px;
|
|
border: none;
|
|
border-bottom: 1px solid #000 !important;
|
|
outline: none;
|
|
background: transparent !important;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
color: #000;
|
|
appearance: textfield; /* reemplaza a -webkit y -moz */
|
|
}
|
|
.sheet-item2B{
|
|
float: left;
|
|
width: 60px !important;
|
|
height: 30px !important;
|
|
margin: 0px 0px 0px 5px;
|
|
border: none;
|
|
border-bottom: 1px solid #000 !important;
|
|
outline: none;
|
|
background: transparent !important;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
color: #000;
|
|
appearance: textfield; /* reemplaza a -webkit y -moz */
|
|
}
|
|
.sheet-item2C{
|
|
float: left;
|
|
width: 310px !important;
|
|
height: 30px !important;
|
|
margin: 0px 0px 0px 5px;
|
|
border: none;
|
|
border-bottom: 1px solid #000 !important;
|
|
outline: none;
|
|
background: transparent !important;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
color: #000;
|
|
appearance: textfield; /* reemplaza a -webkit y -moz */
|
|
}
|
|
.sheet-item2detalles{
|
|
float: none;
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 35px;
|
|
margin: 0px auto 5px ;
|
|
|
|
}
|
|
.sheet-item2detalles textarea{
|
|
float: none;
|
|
width: 350px;
|
|
height: 30px;
|
|
min-height: 50px;
|
|
margin: 5px 5px 0px 40px;
|
|
resize: vertical;
|
|
box-sizing: border-box;
|
|
outline: 0px;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 12px;
|
|
color: #000000;
|
|
background-color: transparent; border: 1px solid #000000;
|
|
}
|
|
.sheet-item2magiadetalles{
|
|
float: none;
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 35px;
|
|
margin: 0px auto 5px ;
|
|
|
|
}
|
|
.sheet-item2magiadetalles textarea{
|
|
float: none;
|
|
width: 350px;
|
|
height: 30px;
|
|
min-height: 150px;
|
|
margin: 5px 5px 0px 40px;
|
|
resize: vertical;
|
|
box-sizing: border-box;
|
|
outline: 0px;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 12px;
|
|
color: #000000;
|
|
background-color: transparent; border: 1px solid #000000;
|
|
}
|
|
.sheet-objeto{
|
|
float: left;
|
|
width: 270px !important;
|
|
height: 30px !important;
|
|
margin: 0px 0px 0px 35px;
|
|
border: none;
|
|
border-bottom: 1px solid #000 !important;
|
|
outline: none;
|
|
background: transparent !important;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
color: #000;
|
|
appearance: textfield; /* reemplaza a -webkit y -moz */
|
|
}
|
|
.sheet-pergamino{
|
|
float: left;
|
|
width: 230px !important;
|
|
height: 30px !important;
|
|
margin: 0px 0px 0px 35px;
|
|
border: none;
|
|
border-bottom: 1px solid #000 !important;
|
|
outline: none;
|
|
background: transparent !important;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
color: #000;
|
|
appearance: textfield; /* reemplaza a -webkit y -moz */
|
|
}
|
|
.sheet-pergaminocargas{
|
|
float: left;
|
|
width: 35px !important;
|
|
height: 30px !important;
|
|
margin: 0px 0px 0px 5px;
|
|
border: none;
|
|
border-bottom: 1px solid #000 !important;
|
|
outline: none;
|
|
background: transparent !important;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
color: #000;
|
|
appearance: textfield; /* reemplaza a -webkit y -moz */
|
|
}
|
|
/*============= DETAILS CSS =============*/
|
|
|
|
details{
|
|
color: #000000 !important;
|
|
padding: 10px 0px 0px;
|
|
cursor: pointer;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 14px;
|
|
}
|
|
details:hover{
|
|
color: #000000 !important;
|
|
padding: 10px 0px 0px;
|
|
cursor: pointer;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 14px;
|
|
}
|
|
|
|
|
|
|
|
/*============= GENERAL CSS =============*/
|
|
.charsheet .sheet-invisible {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-width100{
|
|
float:left;
|
|
position:relative;
|
|
width:100%;
|
|
height:auto;
|
|
min-height: 30px;
|
|
margin: 0px 0px;
|
|
padding: 0px 0px;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
}
|
|
.sheet-columnamig{
|
|
float:left;
|
|
position:relative;
|
|
width:49%;
|
|
height:auto;
|
|
margin: 0% 0% 0% 1%;
|
|
padding: 0px;
|
|
}
|
|
|
|
/*============= ESPACIADORES Y SEPARADORES CSS =============*/
|
|
.sheet-espai10{
|
|
float:none;
|
|
position:relative;
|
|
width:100%;
|
|
height:10px;
|
|
margin:0 auto;
|
|
padding:0}
|
|
|
|
|
|
.sheet-espai-5,.sheet-espai-10,.sheet-espai-15,.sheet-espai-20,.sheet-espai-30,.sheet-espai-40,.sheet-espai-50,.sheet-espai-60{
|
|
float:left;
|
|
position:relative;
|
|
width:100%;
|
|
margin:0 auto;
|
|
padding:0}
|
|
|
|
.sheet-espai-5{height:5px}
|
|
.sheet-espai-10{height:10px}
|
|
.sheet-espai-15{height:15px}
|
|
.sheet-espai-20{height:20px}
|
|
.sheet-espai-30{height:30px}
|
|
.sheet-espai-40{height:40px}
|
|
.sheet-espai-50{height:50px}
|
|
.sheet-espai-60{height:60px}
|
|
|
|
|
|
/*============= REPCONTROL BOTONS CSS =============*/
|
|
.repcontrol {
|
|
display: flex;
|
|
width: 96%;
|
|
justify-content: flex-end;
|
|
clear: both;
|
|
}
|
|
.repcontrol_add,
|
|
.repcontrol_edit,
|
|
.repcontrol_add:hover,
|
|
.repcontrol_edit:hover,
|
|
.repcontrol_add:active,
|
|
.repcontrol_edit:active
|
|
.repcontrol_add:focus,
|
|
.repcontrol_edit:focus{
|
|
width: 2em;
|
|
height: 1.2em;
|
|
margin: 1px;
|
|
padding: 0 1px 3px 1px;
|
|
box-shadow: none;
|
|
color: transparent !important;
|
|
text-shadow: none;
|
|
outline: transparent !important;
|
|
}
|
|
.repcontrol_move {
|
|
float: left;
|
|
margin-left: 5px;
|
|
cursor: move;
|
|
}
|
|
button.btn.repcontrol_del:after,
|
|
button.btn.repcontrol_del:hover {
|
|
color: black;
|
|
}
|
|
button.btn.repcontrol_edit:after {
|
|
font-family: Pictos;
|
|
content: '(';
|
|
color: black;
|
|
margin: 0 0 0 -38px;
|
|
}
|
|
.repcontainer.ui-sortable.editmode ~ .repcontrol button.btn.repcontrol_edit:after {
|
|
margin: 0 0 0 -28px;
|
|
content: ')';
|
|
}
|
|
button.btn.repcontrol_add:after {
|
|
font-family: Pictos;
|
|
content: '&';
|
|
color: black;
|
|
margin: 0 0 0 -31px;
|
|
}
|
|
button.btn:hover.repcontrol_edit:after,
|
|
button.btn:hover.repcontrol_add:after,
|
|
button.btn:hover.repcontrol_del:after {
|
|
color: #73940D;
|
|
}
|
|
a.btn.repcontrol_move:hover {
|
|
color: #73940D;
|
|
}
|
|
button.btn.btn-danger.pictos.repcontrol_del:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
/*=================== FIRMA CSS ===================*/
|
|
|
|
.sheet-generadorpersonatges {
|
|
position: absolute;
|
|
left: 20px;
|
|
bottom: 4px;
|
|
float: left;
|
|
width: auto;
|
|
height: 30px;
|
|
box-sizing:border-box;
|
|
z-index:2;
|
|
}
|
|
.sheet-PJBTN {
|
|
width: 100%;
|
|
height: 20px;
|
|
padding: 1px 1px 2px 1px !important;
|
|
background-color: #ffff00!important;
|
|
color: #000;
|
|
border: 2px solid #000;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease-in-out;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
background-image: none!important;
|
|
}
|
|
.sheet-PJBTN:hover {
|
|
background-color: #7fc8c7!important;
|
|
box-shadow: 0 3px 6px rgba(0,0,0,0.3);
|
|
transform: translateY(-1px);
|
|
color: #ffff00;
|
|
border: 2px solid #ffff00;
|
|
}
|
|
.sheet-PJBTN:active {
|
|
background-color: #ffcc00;
|
|
transform: translateY(1px);
|
|
}
|
|
.sheet-PJBTN span {
|
|
display: inline-block;
|
|
pointer-events: none;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-firma-foot{
|
|
float: left;
|
|
width: 100%;
|
|
height: 15px;
|
|
min-height: 20px;
|
|
margin: 20px auto 5px;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-weight: 500;
|
|
font-size: 11px;
|
|
text-align: center;
|
|
color: #ffff00;
|
|
}
|
|
|
|
.sheet-logoeditorial {
|
|
position: absolute;
|
|
right: 15px;
|
|
bottom: 4px;
|
|
float: right;
|
|
width: 60px;
|
|
height: 44px;
|
|
box-sizing:border-box;
|
|
z-index:2;
|
|
background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/LOGO_CAP_DE_PORK.png");
|
|
background-repeat:no-repeat;
|
|
background-size:cover;
|
|
background-position: center;
|
|
}
|
|
|
|
/*=================== MEDIA CSS ===================*/
|
|
@media screen and (max-width: 500px){
|
|
.sheet-contenedorvj{
|
|
position:relative;
|
|
float:left;
|
|
width:420px;
|
|
max-width: 420px;
|
|
height:auto;
|
|
min-height: 600px;
|
|
margin: 0px auto;
|
|
padding: 0px 0px;
|
|
}
|
|
.sheet-bloc1 {
|
|
position: relative;
|
|
float: left;
|
|
width: 420px;
|
|
height: auto;
|
|
min-height: 630px;
|
|
margin: 0px auto;
|
|
}
|
|
.sheet-bloc2{
|
|
position: relative;
|
|
float: left;
|
|
width: 420px;
|
|
height: auto;
|
|
min-height: 630px;
|
|
margin: 0px auto ;
|
|
background-color: #2f2b3c;
|
|
}
|
|
|
|
.sheet-button0,
|
|
.sheet-button1,
|
|
.sheet-button2,
|
|
.sheet-button3,
|
|
.sheet-button4 {
|
|
width: auto;
|
|
height: 24px;
|
|
background: #7fc8c7;
|
|
color: #ffff00;
|
|
margin: 5px 0 0 5px;
|
|
padding: 8px 10px 8px;
|
|
text-align: center;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 22px;
|
|
border: 2px solid #ffff00;
|
|
|
|
/* Bordes redondeados compatibles */
|
|
border-radius: 5px;
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
|
|
/* Transición suave para el hover */
|
|
transition: all 0.2s ease-in-out;
|
|
-webkit-transition: all 0.2s ease-in-out;
|
|
-moz-transition: all 0.2s ease-in-out;
|
|
|
|
/* Cursor tipo botón */
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sheet-button0:hover,
|
|
.sheet-button1:hover,
|
|
.sheet-button2:hover,
|
|
.sheet-button3:hover,
|
|
.sheet-button4:hover{
|
|
width: auto;
|
|
height: 24px;
|
|
background: #ffff00;
|
|
color: #000000;
|
|
margin: 5px 0px 0px 5px;
|
|
padding: 8px 10px 8px;
|
|
text-align: center;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 22px;
|
|
border: 2px solid #000000;
|
|
}
|
|
|
|
.sheet-button0,
|
|
.sheet-button0:hover,
|
|
.sheet-button0:active{
|
|
margin-left: 5px;
|
|
}
|
|
|
|
|
|
.sheet-generadorpersonatges {
|
|
position: absolute;
|
|
left: 25%;
|
|
bottom: 50px;
|
|
float: left;
|
|
width: 50%;
|
|
height: 30px;
|
|
box-sizing:border-box;
|
|
z-index:2;
|
|
}
|
|
|
|
.sheet-firma-foot{
|
|
float: left;
|
|
width: 100%;
|
|
height: 15px;
|
|
min-height: 30px;
|
|
margin: 50px auto 5px;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-weight: 500;
|
|
font-size: 11px;
|
|
text-align: center;
|
|
color: #ffff00;
|
|
}
|
|
|
|
.sheet-logoeditorial {
|
|
position: absolute;
|
|
right: 30px;
|
|
bottom: 32px;
|
|
float: right;
|
|
width: 60px;
|
|
height: 44px;
|
|
box-sizing:border-box;
|
|
z-index:2;
|
|
background-image: url("https://rolmasters.com/ROLL20/PORK_MORT/LOGO_CAP_DE_PORK.png");
|
|
background-repeat:no-repeat;
|
|
background-size:cover;
|
|
background-position: center;
|
|
}
|
|
}
|
|
@media screen and (min-width: 940px){
|
|
|
|
|
|
}
|
|
@media screen and (min-width: 1000px){
|
|
.sheet-contenedorvj{
|
|
|
|
}
|
|
}
|
|
@media screen and (min-width: 1050px){
|
|
.sheet-contenedorvj{
|
|
|
|
}
|
|
}
|
|
@media screen and (min-width: 1100px){
|
|
.sheet-contenedorvj{
|
|
position:relative;
|
|
float:left;
|
|
width:1680px;
|
|
max-width: 1680px;
|
|
height:auto;
|
|
min-height: 600px;
|
|
margin: 0px auto;
|
|
padding: 0px 0px;
|
|
}
|
|
}
|
|
|
|
/*============= VJBTN GRANDE PORK MORT CSS =============*/
|
|
|
|
.sheet-VJBTN{
|
|
float: left;
|
|
padding: 0px 0px 0px 0px!important;
|
|
font-size: 35px!important;
|
|
background: none!important;
|
|
border: none!important;
|
|
text-align: center !important;
|
|
color: #2f2b3c !important;
|
|
}
|
|
.sheet-VJBTN:hover{
|
|
padding: 0px 0px 0px 0px!important;
|
|
font-size: 35px!important;
|
|
background: none;
|
|
border: none;
|
|
-webkit-transition: background-position 0.5s linear;
|
|
-moz-transition: background-position 0.5s linear;
|
|
-ms-transition: background-position 0.5s linear;
|
|
-o-transition: background-position 0.5s linear;
|
|
transition: background-position 0.5s linear;
|
|
color: #000066 !important;
|
|
}
|
|
.sheet-VJBTN:active{
|
|
padding: 0px 0px 0px 0px!important;
|
|
font-size: 35px!important;
|
|
background: none!important;
|
|
border: none!important;
|
|
box-shadow: none;
|
|
-webkit-transition: background-position 0.1s linear;
|
|
-moz-transition: background-position 0.1s linear;
|
|
-ms-transition: background-position 0.1s linear;
|
|
-o-transition: background-position 0.1s linear;
|
|
transition: background-position 0.1s linear;
|
|
color: #3300cc !important;
|
|
content:"A";
|
|
}
|
|
|
|
.ui-dialog .charsheet button.sheet-VJBTN[type=roll]::before {
|
|
font-family: dicefontd20!important;
|
|
border: none!important;
|
|
background-color: transparent!important;
|
|
content: "A"!important;
|
|
}
|
|
.ui-dialog .charsheet button[type=roll]::before {
|
|
content: none ;
|
|
}
|
|
|
|
|
|
/*============= VJBTN PEQUE PORK MORT CSS =============*/
|
|
|
|
.sheet-VJBTN2{
|
|
float: left;
|
|
padding: 0px 0px 0px 0px!important;
|
|
font-size: 25px!important;
|
|
background: none!important;
|
|
border: none!important;
|
|
text-align: center !important;
|
|
color: #2f2b3c !important;
|
|
}
|
|
.sheet-VJBTN2:hover{
|
|
padding: 0px 0px 0px 0px!important;
|
|
font-size: 25px!important;
|
|
background: none;
|
|
border: none;
|
|
-webkit-transition: background-position 0.5s linear;
|
|
-moz-transition: background-position 0.5s linear;
|
|
-ms-transition: background-position 0.5s linear;
|
|
-o-transition: background-position 0.5s linear;
|
|
transition: background-position 0.5s linear;
|
|
color: #000066 !important;
|
|
}
|
|
.sheet-VJBTN2:active{
|
|
padding: 0px 0px 0px 0px!important;
|
|
font-size: 25px!important;
|
|
background: none!important;
|
|
border: none!important;
|
|
box-shadow: none;
|
|
-webkit-transition: background-position 0.1s linear;
|
|
-moz-transition: background-position 0.1s linear;
|
|
-ms-transition: background-position 0.1s linear;
|
|
-o-transition: background-position 0.1s linear;
|
|
transition: background-position 0.1s linear;
|
|
color: #3300cc !important;
|
|
content:"A";
|
|
}
|
|
|
|
.ui-dialog .charsheet button.sheet-VJBTN2[type=roll]::before {
|
|
font-family: dicefontd20!important;
|
|
border: none!important;
|
|
background-color: transparent!important;
|
|
content: "A"!important;
|
|
}
|
|
|
|
/*============= CHECK CSS =============*/
|
|
|
|
/* Chrome, Safari, Edge, Opera */
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0; }
|
|
|
|
/* Firefox */
|
|
input[type=number] {
|
|
-moz-appearance: textfield; }
|
|
|
|
|
|
/*=================== PORK MORT ATAQUE ROLL ROLLTEMPLATE CSS ===================*/
|
|
|
|
/* Smaller margins - remove these if you want the huge default left margin */
|
|
.sheet-rolltemplate-porkmortataque {
|
|
margin-left: -37px;
|
|
}
|
|
.sheet-rolltemplate-porkmortataque .sheet-fotofondo {
|
|
width: 300px;
|
|
height: auto;
|
|
min-height: 100px;
|
|
overflow: auto;
|
|
background-image: none;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: top;
|
|
background-color: #ffffff;
|
|
box-sizing: border-box;
|
|
border-top: 10px solid #2f2b3a;;
|
|
border-left: 10px solid #fef68e;
|
|
border-right: 10px solid #2f2b3a;
|
|
border-bottom: 10px solid #fef68e;
|
|
}
|
|
|
|
/* Header formatting - title and subtitle */
|
|
.sheet-rolltemplate-porkmortataque .sheet-header {
|
|
height: 40px;
|
|
background-color: #2f2b3a;
|
|
/* change text-align to center to center the header text */
|
|
padding: 5px;
|
|
|
|
}
|
|
.sheet-rolltemplate-porkmortataque .sheet-title {
|
|
margin: 0px 0px 0px 0px;
|
|
text-align: center;
|
|
color: #fef68e;
|
|
text-transform: uppercase;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
.sheet-rolltemplate-porkmortataque .sheet-subtitle {
|
|
margin: 2px 0px 0px 0px;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size:12px;
|
|
text-align: center;
|
|
color: #fef68e;
|
|
}
|
|
|
|
|
|
.textchatcontainer .inlinerollresult {
|
|
background-color: #fef68e;
|
|
border: 2px solid #fef68e;
|
|
padding: 3px 3px 0px 3px!important;
|
|
font-weight: bold;
|
|
cursor: help;
|
|
/* line-height: 20px; */
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
/* Make even-numbered rows grey */
|
|
.sheet-rolltemplate-porkmortataque .sheet-contento :nth-child(4n+3),
|
|
.sheet-rolltemplate-porkmortataque .sheet-contento :nth-child(4n) {
|
|
background-color: transparent !important;
|
|
border: none!important;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-porkmortataque .sheet-filatemplate1{
|
|
position:relative;
|
|
float:left;
|
|
width:90%;
|
|
height:auto;
|
|
min-height: 15px;
|
|
margin: 0% 5%;
|
|
padding: 8px 0px;
|
|
color: #000000;
|
|
text-align:center;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
}
|
|
.sheet-rolltemplate-porkmortataque .sheet-filatemplate2{
|
|
position:relative;
|
|
float:left;
|
|
width:90%;
|
|
height:auto;
|
|
min-height: 15px;
|
|
margin: 0% 5%;
|
|
padding: 10px 0px 10px 0px;
|
|
color: #000000;
|
|
text-align:center;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.sheet-rolltemplate-porkmortataque .sheet-filatemplate3{
|
|
position:relative;
|
|
float:left;
|
|
width:90%;
|
|
height:auto;
|
|
min-height: 15px;
|
|
margin: 0% 5%;
|
|
padding: 10px 0px 10px 0px;
|
|
color: #000000;
|
|
text-align:center;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
/*=================== PORK MORT ATRIBUTS ROLL ROLLTEMPLATE CSS ===================*/
|
|
|
|
/* Smaller margins - remove these if you want the huge default left margin */
|
|
.sheet-rolltemplate-porkmortatributs {
|
|
margin-left: -37px;
|
|
}
|
|
.sheet-rolltemplate-porkmortatributs .sheet-fotofondo {
|
|
width: 300px;
|
|
height: auto;
|
|
min-height: 130px;
|
|
overflow: auto;
|
|
background-image: none;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: top;
|
|
background-color: #ffffff;
|
|
box-sizing: border-box;
|
|
border-top: 10px solid #2f2b3a;;
|
|
border-left: 10px solid #94c5c6;
|
|
border-right: 10px solid #2f2b3a;
|
|
border-bottom: 10px solid #94c5c6;
|
|
}
|
|
|
|
/* Header formatting - title and subtitle */
|
|
.sheet-rolltemplate-porkmortatributs .sheet-header {
|
|
height: 40px;
|
|
background-color: #2f2b3a;
|
|
/* change text-align to center to center the header text */
|
|
padding: 5px;
|
|
|
|
}
|
|
.sheet-rolltemplate-porkmortatributs .sheet-title {
|
|
margin: 0px 0px 0px 0px;
|
|
text-align: center;
|
|
color: #fef68e;
|
|
text-transform: uppercase;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
.sheet-rolltemplate-porkmortatributs .sheet-subtitle {
|
|
margin: 2px 0px 0px 0px;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size:12px;
|
|
text-align: center;
|
|
color: #fef68e;
|
|
}
|
|
|
|
|
|
.textchatcontainer .inlinerollresult {
|
|
background-color: #fef68e;
|
|
border: 2px solid #fef68e;
|
|
padding: 3px 3px 0px 3px!important;
|
|
font-weight: bold;
|
|
cursor: help;
|
|
/* line-height: 20px; */
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
/* Make even-numbered rows grey */
|
|
.sheet-rolltemplate-porkmortatributs .sheet-contento :nth-child(4n+3),
|
|
.sheet-rolltemplate-porkmortatributs .sheet-contento :nth-child(4n) {
|
|
background-color: transparent !important;
|
|
border: none!important;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-porkmortatributs .sheet-filatemplate1{
|
|
position:relative;
|
|
float:left;
|
|
width:90%;
|
|
height:auto;
|
|
min-height: 15px;
|
|
margin: 0% 5%;
|
|
padding: 8px 0px;
|
|
color: #000000;
|
|
text-align:center;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
}
|
|
.sheet-rolltemplate-porkmortatributs .sheet-filatemplate2{
|
|
position:relative;
|
|
float:left;
|
|
width:90%;
|
|
height:auto;
|
|
min-height: 15px;
|
|
margin: 0% 5%;
|
|
padding: 10px 0px 10px 0px;
|
|
color: #000000;
|
|
text-align:center;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
|
|
/*=================== PORKMORT DADOS ROLL ROLLTEMPLATE CSS ===================*/
|
|
|
|
/* Smaller margins - remove these if you want the huge default left margin */
|
|
.sheet-rolltemplate-porkmortdados {
|
|
margin-left: -37px;
|
|
}
|
|
.sheet-rolltemplate-porkmortdados .sheet-fotofondo {
|
|
width: 300px;
|
|
height: auto;
|
|
min-height: 100px;
|
|
overflow: auto;
|
|
background-image: none;
|
|
background-repeat: no-repeat;
|
|
background-size:cover;
|
|
background-position: top;
|
|
background-color: #ffffff;
|
|
box-sizing: border-box;
|
|
border-top: 10px solid #2f2b3a;;
|
|
border-left: 10px solid #e97365;
|
|
border-right: 10px solid #2f2b3a;
|
|
border-bottom: 10px solid #e97365;
|
|
}
|
|
|
|
/* Header formatting - title and subtitle */
|
|
.sheet-rolltemplate-porkmortdados .sheet-header {
|
|
height: 40px;
|
|
background-color: #2f2b3a;
|
|
/* change text-align to center to center the header text */
|
|
padding: 5px;
|
|
|
|
}
|
|
.sheet-rolltemplate-porkmortdados .sheet-title {
|
|
margin: 0px 0px 0px 0px;
|
|
text-align: center;
|
|
color: #fef68e;
|
|
text-transform: uppercase;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
.sheet-rolltemplate-porkmortdados .sheet-subtitle {
|
|
margin: 2px 0px 0px 0px;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size:12px;
|
|
text-align: center;
|
|
color: #fef68e;
|
|
}
|
|
|
|
|
|
.textchatcontainer .inlinerollresult {
|
|
background-color: #fef68e;
|
|
border: 2px solid #fef68e;
|
|
padding: 3px 3px 0px 3px!important;
|
|
font-weight: bold;
|
|
cursor: help;
|
|
/* line-height: 20px; */
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
/* Make even-numbered rows grey */
|
|
.sheet-rolltemplate-porkmortdados .sheet-contento :nth-child(4n+3),
|
|
.sheet-rolltemplate-porkmortdados .sheet-contento :nth-child(4n) {
|
|
background-color: transparent !important;
|
|
border: none!important;
|
|
}
|
|
|
|
.sheet-rolltemplate-porkmortdados .sheet-filatemplate1{
|
|
position:relative;
|
|
float:left;
|
|
width:90%;
|
|
height:auto;
|
|
min-height: 15px;
|
|
margin: 0% 5%;
|
|
padding: 8px 0px;
|
|
color: #2f2b3a;
|
|
text-align:center;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
}
|
|
.sheet-rolltemplate-porkmortdados .sheet-filatemplate2{
|
|
position:relative;
|
|
float:left;
|
|
width:90%;
|
|
height:auto;
|
|
min-height: 15px;
|
|
margin: 0% 5%;
|
|
padding: 10px 0px 10px 0px;
|
|
color: #2f2b3a;
|
|
text-align:center;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.sheet-rolltemplate-porkmortdados .sheet-filatemplate4{
|
|
position:relative;
|
|
float:left;
|
|
width:90%;
|
|
height:auto;
|
|
min-height: 0px;
|
|
margin: 0% 5%;
|
|
padding: 5px 0px;
|
|
color: #2f2b3a;
|
|
text-align:center;
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
}
|