mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
890 lines
20 KiB
CSS
890 lines
20 KiB
CSS
/* === 1. ESTILOS DE LOS BOTONES Y PESTAÑAS === */
|
|
|
|
input.sheet-tab-input {
|
|
width: 150px;
|
|
height: 40px;
|
|
opacity: 0;
|
|
position: relative;
|
|
margin-right: -150px;
|
|
cursor: pointer;
|
|
z-index: 100;
|
|
}
|
|
|
|
span.sheet-tab-visual {
|
|
display: inline-block;
|
|
width: 150px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
background-color: #ddd;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
border-radius: 5px 5px 0 0;
|
|
border: 1px solid #999;
|
|
}
|
|
|
|
span.sheet-spacer {
|
|
display: inline-block;
|
|
width: 10px;
|
|
}
|
|
|
|
/* Efecto de botón pulsado */
|
|
input.sheet-tab1:checked + span.sheet-tab-visual {
|
|
background-color: #333;
|
|
color: white;
|
|
border-bottom: 2px solid #333;
|
|
}
|
|
input.sheet-tab2:checked + span.sheet-tab-visual {
|
|
background-color: #333;
|
|
color: white;
|
|
border-bottom: 2px solid #333;
|
|
}
|
|
|
|
/* Lógica de ocultación */
|
|
div.sheet-page-container {
|
|
display: none;
|
|
}
|
|
input.sheet-tab1:checked ~ div.sheet-page-1 {
|
|
display: block !important;
|
|
}
|
|
input.sheet-tab2:checked ~ div.sheet-page-2 {
|
|
display: block !important;
|
|
}
|
|
|
|
|
|
/* === 2. ESTILOS GENERALES === */
|
|
|
|
h3 {
|
|
border-bottom: 2px solid #333;
|
|
color: #333;
|
|
margin-top: 15px;
|
|
margin-bottom: 10px;
|
|
text-transform: uppercase;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
label { font-weight: bold; }
|
|
|
|
/* === 3. DATOS PERSONALES (HORIZONTAL) === */
|
|
.sheet-personal-data-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
background: #f4f4f4;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.sheet-data-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.sheet-data-box label {
|
|
font-size: 0.8em;
|
|
margin-bottom: 2px;
|
|
}
|
|
.sheet-data-box input {
|
|
border: 1px solid #999;
|
|
}
|
|
|
|
|
|
/* === 4. LAYOUT DE 4 COLUMNAS === */
|
|
.sheet-four-column-layout {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 10px;
|
|
align-items: start;
|
|
}
|
|
|
|
.sheet-column {
|
|
font-size: 0.85em;
|
|
}
|
|
.sheet-column input[type="number"] {
|
|
width: 35px;
|
|
padding: 2px;
|
|
text-align: center;
|
|
}
|
|
.sheet-column h3 {
|
|
font-size: 1em;
|
|
background: #333;
|
|
color: white;
|
|
padding: 3px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* --- TABLAS DE HABILIDADES ESTÁNDAR (5 COLUMNAS) --- */
|
|
/* Se usa para TODO (Generales, Influencia, Especiales e Idiomas) */
|
|
.sheet-skill-row {
|
|
display: grid;
|
|
/* Grid: Nombre | Attr | Base | Nivel | Total */
|
|
grid-template-columns: 1fr 25px 35px 35px 35px;
|
|
gap: 2px;
|
|
padding: 2px 0;
|
|
border-bottom: 1px solid #eee;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-skill-header {
|
|
background-color: #ddd;
|
|
color: black;
|
|
font-weight: bold;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.sheet-root-skill {
|
|
background-color: #e8e8e8;
|
|
border-top: 1px solid #999;
|
|
font-weight: bold;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.sheet-child-skill span:first-child {
|
|
padding-left: 10px;
|
|
font-style: italic;
|
|
color: #444;
|
|
}
|
|
|
|
input.sheet-total-box {
|
|
background-color: #e6e6e6;
|
|
border: 1px solid #999;
|
|
font-weight: bold;
|
|
}
|
|
|
|
span.sheet-attr-ref {
|
|
font-size: 0.7em;
|
|
color: #666;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Input de texto elegante para idiomas/especialidades */
|
|
input.sheet-text-line {
|
|
width: 95%;
|
|
border: none;
|
|
border-bottom: 1px dotted #333;
|
|
background: transparent;
|
|
text-align: left;
|
|
font-style: italic;
|
|
}
|
|
input.sheet-text-line:focus {
|
|
outline: none;
|
|
border-bottom: 1px solid #000;
|
|
}
|
|
|
|
/* --- CARACTERÍSTICAS (Columna 1) --- */
|
|
.sheet-atributos-compact .sheet-atributo-grupo {
|
|
border: 1px solid #ccc;
|
|
margin-bottom: 5px;
|
|
padding: 5px;
|
|
background: #fff;
|
|
}
|
|
|
|
.sheet-header-with-input {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #555;
|
|
color: white;
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.sheet-header-with-input h4 {
|
|
margin: 0;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.sheet-sub-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
/* --- ESTADO (PESTAÑA 2) --- */
|
|
.sheet-status-bars-container {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
.sheet-status-box {
|
|
border: 2px solid #333;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
background: #fff;
|
|
width: 220px;
|
|
text-align: center;
|
|
}
|
|
.sheet-status-box h4 {
|
|
margin-top: 0;
|
|
background: #ddd;
|
|
padding: 5px;
|
|
}
|
|
.sheet-row { margin-bottom: 5px; }
|
|
|
|
/* === 5. SECCIÓN DE ARMAMENTO === */
|
|
|
|
.sheet-armamento-container {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Cuadrícula para alinear perfectamente cabeceras y cajas de texto */
|
|
.sheet-armamento-header, .sheet-armamento-row {
|
|
display: grid;
|
|
/* Proporciones de ancho para cada columna (Nombre es la más grande) */
|
|
grid-template-columns: 3fr 1fr 1.5fr 1fr 1fr 1fr 2.5fr 1fr 1fr;
|
|
gap: 5px;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-armamento-header {
|
|
font-weight: bold;
|
|
border-bottom: 2px solid #333;
|
|
padding-bottom: 5px;
|
|
margin-bottom: 5px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.sheet-armamento-row {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* Forzar que los inputs ocupen todo su espacio en la celda */
|
|
.sheet-armamento-row input[type="text"],
|
|
.sheet-armamento-row input[type="number"] {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border: none;
|
|
border-bottom: 1px dotted #333; /* Estilo clásico de hoja de papel */
|
|
background: transparent;
|
|
padding: 2px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Excepción: el nombre va alineado a la izquierda */
|
|
.sheet-armamento-row input.sheet-arma-nombre {
|
|
text-align: left;
|
|
}
|
|
|
|
/* Efecto al seleccionar la casilla */
|
|
.sheet-armamento-row input:focus {
|
|
outline: none;
|
|
border-bottom: 1px solid #000;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
/* --- BLOQUE DE ALCANCE (_ / _ / _ / _) --- */
|
|
.sheet-alcance-inputs {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-alcance-inputs input[type="text"] {
|
|
width: 20px !important; /* Casillas muy pequeñitas */
|
|
padding: 0;
|
|
text-align: center;
|
|
border: none;
|
|
border-bottom: 1px solid #333; /* Línea de base igual a tu imagen */
|
|
}
|
|
|
|
.sheet-alcance-inputs span {
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
/* === 6. LAYOUT DE LA PESTAÑA 2 (ARMAS Y ESTADO) === */
|
|
|
|
.sheet-page2-grid {
|
|
display: flex;
|
|
gap: 30px;
|
|
margin-top: 15px;
|
|
align-items: flex-start; /* Alinea los elementos arriba */
|
|
}
|
|
|
|
/* El bloque de armas ocupa la mayor parte del espacio */
|
|
.sheet-armamento-col {
|
|
flex: 3;
|
|
}
|
|
|
|
/* El bloque de estado ocupa menos espacio y se apila en vertical */
|
|
.sheet-estado-col {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Asegura que las cajas de estado mantengan su tamaño adecuado */
|
|
.sheet-estado-col .sheet-status-box {
|
|
width: 100%;
|
|
max-width: 200px;
|
|
}
|
|
|
|
/* === 7. SECCIÓN DE CAPACIDADES === */
|
|
|
|
.sheet-capacidades-box {
|
|
text-align: left;
|
|
padding: 10px;
|
|
width: 220px !important; /* Un poco más ancho para que quepa el texto */
|
|
margin-top: 20px;
|
|
|
|
}
|
|
|
|
.sheet-cap-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 0.85em;
|
|
margin-bottom: 4px;
|
|
|
|
}
|
|
|
|
/* Indentación para las sub-categorías (ej: Duración) */
|
|
.sheet-cap-sub {
|
|
padding-left: 15px;
|
|
font-size: 0.8em;
|
|
color: #444;
|
|
}
|
|
|
|
.sheet-cap-row label {
|
|
font-weight: normal;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Estilo de los números simulando relleno a boli */
|
|
.sheet-cap-row input[type="number"] {
|
|
width: 30px;
|
|
border: none;
|
|
border-bottom: 1px solid #333;
|
|
background: transparent;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-cap-row span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
.sheet-multi-input input[type="number"] {
|
|
width: 25px;
|
|
}
|
|
|
|
/* === 8. SECCIÓN CONTACTOS Y EQUIPO === */
|
|
|
|
.sheet-contactos-equipo-row {
|
|
display: flex;
|
|
gap: 30px;
|
|
margin-top: 20px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.sheet-contactos-container {
|
|
flex: 1; /* Ocupa la mitad del espacio disponible */
|
|
}
|
|
|
|
.sheet-equipo-container {
|
|
flex: 1.2; /* Un pelín más grande porque tiene más columnas */
|
|
}
|
|
|
|
/* Sistema de cuadrícula para alinear los encabezados y los inputs */
|
|
.sheet-contactos-header, .sheet-contactos-row {
|
|
display: grid;
|
|
grid-template-columns: 3fr 1fr; /* Nombre es grande, Influencia es pequeño */
|
|
gap: 10px;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-equipo-header, .sheet-equipo-row {
|
|
display: grid;
|
|
grid-template-columns: 3fr 1fr 1fr 1fr; /* Nombre grande, el resto pequeños */
|
|
gap: 10px;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Estilo para los títulos de la tabla */
|
|
.sheet-contactos-header, .sheet-equipo-header {
|
|
font-weight: bold;
|
|
border-bottom: 2px solid #333;
|
|
padding-bottom: 5px;
|
|
margin-bottom: 5px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
/* Estilo de los espacios para escribir (inputs) */
|
|
.sheet-contactos-row, .sheet-equipo-row {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.sheet-contactos-row input, .sheet-equipo-row input {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border: none;
|
|
border-bottom: 1px solid #333; /* Línea simulando papel */
|
|
background: transparent;
|
|
padding: 2px;
|
|
border-radius: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
/* El nombre siempre debe ir alineado a la izquierda */
|
|
.sheet-contactos-row input.sheet-text-left,
|
|
.sheet-equipo-row input.sheet-text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-contactos-row input:focus, .sheet-equipo-row input:focus {
|
|
outline: none;
|
|
border-bottom: 1px solid #000;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
/* === 9. SECCIÓN RASGOS (VIRTUDES, DEFECTOS Y CAPACIDADES ESPECIALES) === */
|
|
|
|
.sheet-rasgos-row {
|
|
display: flex;
|
|
gap: 15px; /* Espacio entre las tres columnas */
|
|
margin-bottom: 20px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.sheet-rasgo-container {
|
|
flex: 1; /* Hace que las tres cajas midan exactamente lo mismo */
|
|
}
|
|
|
|
.sheet-rasgo-row {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* Estilo de los inputs simulando líneas para escribir */
|
|
.sheet-rasgo-row input[type="text"] {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border: none;
|
|
border-bottom: 1px solid #333;
|
|
background: transparent;
|
|
padding: 4px 2px;
|
|
border-radius: 0;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.sheet-rasgo-row input[type="text"]:focus {
|
|
outline: none;
|
|
border-bottom: 1px solid #000;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
/* === 10. SECCIÓN DE LOCALIZACIONES === */
|
|
|
|
.sheet-localizaciones-box {
|
|
padding: 5px;
|
|
width: 220px !important; /* Mismo ancho que las capacidades para que cuadre perfecto */
|
|
border: 1px solid #333; /* El borde doble que pide la imagen */
|
|
|
|
}
|
|
|
|
/* Zonas de impacto (0 Cabeza, 1 2 3 Pecho...) */
|
|
.sheet-loc-zone {
|
|
text-align: center;
|
|
margin-top: 6px;
|
|
margin-bottom: 2px;
|
|
font-size: 1em;
|
|
font-family: 'Georgia', serif; /* Fuente cursiva elegante como la de la imagen */
|
|
border-top: 1px dotted #ccc; /* Ligera separación visual opcional */
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.sheet-loc-zone:first-child {
|
|
border-top: none;
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
/* Cajas de datos (Resistencia y Heridas) */
|
|
.sheet-loc-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
font-size: 0.85em;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.sheet-loc-row label {
|
|
margin: 0;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* Input normal para resistencia */
|
|
.sheet-loc-row input[type="number"] {
|
|
width: 35px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 3px;
|
|
padding: 1px;
|
|
text-align: center;
|
|
background: #fff;
|
|
}
|
|
|
|
/* Input simulando línea subrayada para Heridas */
|
|
.sheet-loc-row input.sheet-line-input {
|
|
border: none;
|
|
border-bottom: 1px solid #333;
|
|
background: transparent;
|
|
border-radius: 0;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* === 11. SECCIÓN DE DINERO === */
|
|
|
|
.sheet-dinero-box {
|
|
width: 220px !important;
|
|
padding: 10px;
|
|
border: 2px solid #333;
|
|
margin-top: 20px;
|
|
|
|
}
|
|
|
|
.sheet-dinero-box h4 {
|
|
background: transparent; /* Quitamos el fondo gris para que parezca más un título de pergamino */
|
|
border-bottom: 1px solid #333;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.sheet-dinero-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
font-family: 'Georgia', serif; /* Letra clásica de la imagen */
|
|
}
|
|
|
|
.sheet-dinero-row label {
|
|
font-weight: normal;
|
|
margin: 0;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
/* El input simula la línea horizontal de escritura */
|
|
.sheet-dinero-row input[type="number"] {
|
|
flex: 1;
|
|
margin: 0 5px;
|
|
border: none;
|
|
border-bottom: 1px solid #333;
|
|
background: transparent;
|
|
border-radius: 0;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
/* Ocultar las flechitas de los números para que quede más limpio */
|
|
.sheet-dinero-row input[type=number]::-webkit-inner-spin-button,
|
|
.sheet-dinero-row input[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
.sheet-dinero-row input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
.sheet-dinero-row span {
|
|
font-style: italic;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
/* === 12. SECCIÓN DE NOTAS === */
|
|
|
|
.sheet-notas-container {
|
|
margin-top: 20px;
|
|
border: 2px solid #333;
|
|
padding: 8px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background-color: #fff; /* Fondo blanco limpio para escribir */
|
|
}
|
|
|
|
.sheet-notas-title {
|
|
font-family: 'Georgia', serif;
|
|
font-size: 1.3em;
|
|
letter-spacing: 2px;
|
|
margin: 0 0 5px 0;
|
|
text-align: left;
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Área de texto expandible */
|
|
.sheet-notas-textarea {
|
|
width: 100%;
|
|
min-height: 150px; /* Altura por defecto */
|
|
border: none;
|
|
resize: vertical; /* Permite al jugador estirar la caja hacia abajo si escribe mucho */
|
|
background: transparent;
|
|
font-family: Arial, sans-serif;
|
|
font-size: 0.95em;
|
|
padding: 5px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sheet-notas-textarea:focus {
|
|
outline: none;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
/* === 13. TIRADA SOMBRA (CORREGIDO) === */
|
|
|
|
/* Diseño del mensaje en el Chat */
|
|
.sheet-rolltemplate-tirada_sombra .sheet-rt-card {
|
|
background-color: #ffffff;
|
|
border: 2px solid #2c3e50;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra .sheet-rt-header {
|
|
background-color: #2c3e50;
|
|
color: #ffffff;
|
|
padding: 8px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra .sheet-rt-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 6px 12px;
|
|
border-bottom: 1px solid #dddddd;
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra .sheet-shadow-row {
|
|
background-color: #f4f4f4;
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra .sheet-label {
|
|
font-weight: bold;
|
|
color: #444;
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra .sheet-value {
|
|
font-weight: bold;
|
|
color: #000;
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra .sheet-main-value {
|
|
font-size: 1.3em;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.sheet-btn-tirada_sombra {
|
|
background: #333;
|
|
color: white;
|
|
border: 1px solid #000;
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.sheet-btn-tirada_sombra:hover {
|
|
background: #555;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Estilos para el cuadro de resultado final */
|
|
.sheet-rolltemplate-tirada_sombra .sheet-rt-result-box {
|
|
padding: 10px;
|
|
text-align: center;
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
border-top: 2px solid #2c3e50;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-exito {
|
|
color: #27ae60; /* Verde */
|
|
text-shadow: 1px 1px 1px #000;
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-fallo {
|
|
color: #c0392b; /* Rojo */
|
|
text-shadow: 1px 1px 1px #000;
|
|
}
|
|
|
|
/* Ajuste opcional para ver los 3 dados en una línea */
|
|
.sheet-rolltemplate-tirada_sombra .sheet-value {
|
|
font-size: 1em;
|
|
}
|
|
|
|
/* Quitar el formato de "cajita de dado" para que parezca texto normal */
|
|
.sheet-rolltemplate-tirada_sombra .inlinerollresult {
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
padding: 0 !important;
|
|
font-weight: bold;
|
|
color: #000;
|
|
}
|
|
|
|
/* Estilos de la tarjeta y filas */
|
|
.sheet-rolltemplate-tirada_sombra .sheet-rt-card {
|
|
background-color: #ffffff;
|
|
border: 2px solid #2c3e50;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
width: 220px; /* Tamaño fijo para que no baile */
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra .sheet-rt-header {
|
|
background-color: #2c3e50;
|
|
color: #ffffff;
|
|
padding: 8px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra .sheet-rt-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 4px 10px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra .sheet-shadow-row {
|
|
background-color: #f1f3f4;
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra .sheet-main-value {
|
|
font-size: 1.2em;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
/* El mensaje de Éxito/Fallo al final */
|
|
.sheet-rolltemplate-tirada_sombra .sheet-rt-result-box {
|
|
padding: 8px;
|
|
text-align: center;
|
|
font-family: 'Georgia', serif;
|
|
font-weight: bold;
|
|
font-size: 1.3em;
|
|
border-top: 1px solid #2c3e50;
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-exito {
|
|
color: #27ae60;
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-fallo {
|
|
color: #c0392b;
|
|
}
|
|
|
|
/* Colores para resultados especiales en el Chat */
|
|
.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-critico {
|
|
color: #d4af37; /* Dorado */
|
|
text-shadow: 2px 2px 2px #000;
|
|
font-size: 1.2em;
|
|
animation: flash 1s infinite alternate; /* Opcional: un pequeño parpadeo */
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-pifia {
|
|
color: #000000;
|
|
background: #c0392b;
|
|
padding: 2px;
|
|
border-radius: 3px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-especial-exito {
|
|
color: #2ecc71; /* Verde esmeralda */
|
|
border-bottom: 2px dashed #2ecc71;
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra .sheet-rt-msg-especial-fallo {
|
|
color: #e67e22; /* Naranja */
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Animación opcional para el crítico */
|
|
@keyframes flash {
|
|
from { opacity: 1; }
|
|
to { opacity: 0.7; }
|
|
}
|
|
|
|
/* Botón de tirada pequeño para habilidades */
|
|
button[type="action"].sheet-skill-roll-btn {
|
|
font-family: "dicefontd10"; /* Fuente interna de Roll20 para iconos de dados */
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 1.2em;
|
|
color: #333;
|
|
cursor: pointer;
|
|
box-shadow: none;
|
|
text-shadow: none;
|
|
width: 20px;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
button[type="action"].sheet-skill-roll-btn:hover {
|
|
color: #c0392b; /* Cambia a rojo al pasar el ratón */
|
|
}
|
|
|
|
/* Ajuste de la cuadrícula de habilidades para que quepa el botón al principio */
|
|
.sheet-skill-row {
|
|
/* Añadimos una columna de 20px al principio para el botón */
|
|
grid-template-columns: 20px 1fr 25px 35px 35px 35px;
|
|
}
|
|
|
|
.sheet-skill-header {
|
|
/* El encabezado también debe tener 6 columnas */
|
|
grid-template-columns: 20px 1fr 25px 35px 35px 35px;
|
|
}
|
|
|
|
/* Ajuste para la caja de daño integrada */
|
|
.sheet-rolltemplate-tirada_sombra .sheet-rt-card {
|
|
min-width: 220px;
|
|
}
|
|
|
|
/* Fila de localización resaltada */
|
|
.sheet-rolltemplate-tirada_sombra .sheet-rt-row span {
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra .sheet-main-value {
|
|
font-size: 1.3em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Ajuste para que el texto de daño multilínea se vea bien */
|
|
.sheet-rolltemplate-tirada_sombra div[style*="background: #fdfaf4"] {
|
|
text-align: left;
|
|
color: #333;
|
|
border-radius: 0 0 5px 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-tirada_sombra br + b {
|
|
color: #630d0d;
|
|
}
|
|
|
|
/* Estilo para la caja de texto de daño multilínea */
|
|
.sheet-rolltemplate-tirada_sombra div[style*="white-space: pre-wrap"] {
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
font-family: 'Courier New', monospace; /* Opcional: estilo más "informe de combate" */
|
|
}
|