mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
679 lines
13 KiB
CSS
679 lines
13 KiB
CSS
/*
|
|
CSS FIRE EMBLEM */
|
|
/* Character sheet for ROll20 by VJ Rolmasters*/
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Vollkorn+SC:wght@400;600;700;900&display=swap');
|
|
|
|
/*============= FONTS CSS =============*/
|
|
.vollkorn-sc-regular {
|
|
font-family: "Vollkorn SC", serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
.vollkorn-sc-semibold {
|
|
font-family: "Vollkorn SC", serif;
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
}
|
|
|
|
.vollkorn-sc-bold {
|
|
font-family: "Vollkorn SC", serif;
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
|
|
.vollkorn-sc-black {
|
|
font-family: "Vollkorn SC", serif;
|
|
font-weight: 900;
|
|
font-style: normal;
|
|
}
|
|
|
|
/*=================== TABS NOU MENU CSS ===================*/
|
|
|
|
.sheet-cosmenu2{
|
|
float: none;
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 1000px;
|
|
margin: 0px auto ;
|
|
}
|
|
|
|
/* configure the tab buttons */
|
|
.charsheet .sheet-character,
|
|
.charsheet .sheet-weapons,
|
|
.charsheet .sheet-background,
|
|
.charsheet .sheet-abilities{
|
|
display: none;
|
|
}
|
|
|
|
/* style the active button */
|
|
.charsheet .sheet-tabstoggle[value="character"] ~ div .sheet-button0 {background-color: #FF0004 !important; color: #FFDD00 !important;}
|
|
.charsheet .sheet-tabstoggle[value="weapons"] ~ div .sheet-button1 {background-color: #FF0004 !important; color: #FFDD00 !important;}
|
|
.charsheet .sheet-tabstoggle[value="background"] ~ div .sheet-button2 {background-color: #FF0004 !important; color: #FFDD00 !important;}
|
|
.charsheet .sheet-tabstoggle[value="abilities"] ~ div .sheet-button3 {background-color: #FF0004 !important; color: #FFDD00 !important;}
|
|
|
|
/* show the selected tab */
|
|
.charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character,
|
|
.charsheet .sheet-tabstoggle[value="weapons"] ~ div.sheet-weapons,
|
|
.charsheet .sheet-tabstoggle[value="background"] ~ div.sheet-background,
|
|
.charsheet .sheet-tabstoggle[value="abilities"] ~ div.sheet-abilities{
|
|
display: block;
|
|
}
|
|
|
|
.sheet-button0,
|
|
.sheet-button1,
|
|
.sheet-button2,
|
|
.sheet-button3{
|
|
width: auto;
|
|
background: #000000;
|
|
color: #ffffff;
|
|
margin: 0px 0px 0px 3px;
|
|
padding: 14px 46px 12px;
|
|
text-align: center;
|
|
font-family: "Vollkorn SC", serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 18px;
|
|
border: 2px solid #000000;
|
|
-webkit-box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75);
|
|
-moz-box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75);
|
|
box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75);
|
|
}
|
|
|
|
.sheet-button0:hover,
|
|
.sheet-button1:hover,
|
|
.sheet-button2:hover,
|
|
.sheet-button3:hover{
|
|
width: auto;
|
|
background: #FF5F00;
|
|
color: #ffffff;
|
|
margin: 0px 0px 0px 3px;
|
|
padding: 14px 46px 12px;
|
|
text-align: center;
|
|
font-family: "Vollkorn SC", serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 18px;
|
|
border: 2px solid #000000;
|
|
-webkit-box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75);
|
|
-moz-box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75);
|
|
box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.75);
|
|
}
|
|
|
|
|
|
|
|
/*============= CONTENEDORES Y COLUMNAS CSS =============*/
|
|
|
|
.sheet-cajamagica{
|
|
background-color: #f5f5f5;
|
|
border-color: #ddd;
|
|
cursor: not-allowed;
|
|
color: #555;
|
|
border: 1px solid #ccc;
|
|
-webkit-border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.sheet-clearfloat {
|
|
clear:both;
|
|
height:0;
|
|
font-size: 0px;
|
|
line-height:0px;
|
|
}
|
|
.sheet-ampladatotal{
|
|
float:none;
|
|
width:100%;
|
|
height:auto;
|
|
display: inline-block;
|
|
}
|
|
.sheet-espai100{
|
|
float: left;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100px;
|
|
margin: 0px auto;
|
|
}
|
|
.ui-dialog .charsheet {
|
|
padding: 0px 0px;
|
|
}
|
|
|
|
.sheet-contenedorvj{
|
|
float:none;
|
|
position:relative;
|
|
width:100%;
|
|
max-width: 860px;
|
|
height:auto;
|
|
margin: 0px auto;
|
|
padding: 0px 0px;
|
|
}
|
|
|
|
.sheet-contenedor-central{
|
|
float: none;
|
|
width: 860px;
|
|
height: auto;
|
|
min-height: 0px;
|
|
margin: 0px auto ;
|
|
background-image: none;
|
|
background-repeat:repeat-y;
|
|
background-size: auto;
|
|
background-position: center;
|
|
}
|
|
.sheet-capinfo{
|
|
float:left;
|
|
position:relative;
|
|
width:96%;
|
|
height:105px;
|
|
margin: 0px 2%;
|
|
padding: 0px 0px;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
}
|
|
|
|
.sheet-columna600{
|
|
float:left;
|
|
position:relative;
|
|
width:620px;
|
|
height:auto;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
.sheet-characterinfo{
|
|
width:150px;
|
|
height:30px;
|
|
margin:0px 0px;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-right: none;
|
|
border-bottom: solid 2px #000000;
|
|
}
|
|
.sheet-columnalogo{
|
|
float:left;
|
|
position:relative;
|
|
width:190px;
|
|
height:auto;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.sheet-100{
|
|
float:left;
|
|
position:relative;
|
|
width:96%;
|
|
height:auto;
|
|
margin: 0px 2%;
|
|
padding: 0px 0px;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
}
|
|
|
|
.sheet-width100{
|
|
float:left;
|
|
position:relative;
|
|
width:100%;
|
|
height:auto;
|
|
min-height: 32px;
|
|
margin: 0px 0px;
|
|
padding: 0px 0px;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
}
|
|
.sheet-columnaters{
|
|
float:left;
|
|
position:relative;
|
|
width:32%;
|
|
height:auto;
|
|
margin: 0% 0% 0% 1%;
|
|
padding: 0px;
|
|
}
|
|
.sheet-columnadosters{
|
|
float:left;
|
|
position:relative;
|
|
width:66%;
|
|
height:auto;
|
|
margin: 0% 0% 0% 1%;
|
|
padding: 0px;
|
|
}
|
|
.sheet-columnamig{
|
|
float:left;
|
|
position:relative;
|
|
width:49%;
|
|
height:auto;
|
|
margin: 0% 0% 0% 1%;
|
|
padding: 0px;
|
|
}
|
|
|
|
.sheet-ampladatotal30{
|
|
float:none;
|
|
width:100%;
|
|
height:30px;
|
|
display: inline-block;
|
|
}
|
|
.sheet-ampladatotal301{
|
|
float:none;
|
|
width:600px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
}
|
|
/*============= STATS CSS =============*/
|
|
|
|
.sheet-stats-columnA{
|
|
float:left;
|
|
width:210px;
|
|
height:auto;
|
|
min-height: 500px;
|
|
}
|
|
|
|
.sheet-stats-columnB{
|
|
float:left;
|
|
width:610px;
|
|
height:auto;
|
|
min-height: 500px;
|
|
}
|
|
|
|
|
|
.sheet-stats-boxA{
|
|
float:left;
|
|
width:115px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
text-align: center;
|
|
background-color: #000000;
|
|
}
|
|
.sheet-stats-checkbox{
|
|
float:left;
|
|
width:47px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
padding: 5px 0px 0px;
|
|
text-align: center;
|
|
background-color:antiquewhite;
|
|
}
|
|
.sheet-stats-name{
|
|
float:left;
|
|
width:67px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
padding: 3px 0px 0px;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
font-family: "Vollkorn SC", serif;
|
|
font-size: 20px;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
.sheet-stats-boxB{
|
|
float:left;
|
|
width:200px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
text-align: center;
|
|
}
|
|
.sheet-stats-number-box{
|
|
float:left;
|
|
width:115px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
text-align: center;
|
|
}
|
|
.sheet-stats-fletxa{
|
|
float:left;
|
|
width:20px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
text-align: center;
|
|
}
|
|
.sheet-stats-temporal{
|
|
float:left;
|
|
width:60px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/*============= SKILLS, WEAPONS AND ITEMS CSS =============*/
|
|
.sheet-table-head{
|
|
float:left;
|
|
position:relative;
|
|
width:100%;
|
|
height:auto;
|
|
min-height: 25px;
|
|
margin: 0px 0px;
|
|
padding: 5px 0px 0px;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
background-color: #000000;
|
|
font-family: "Vollkorn SC", serif;
|
|
font-size: 20px;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-skill{
|
|
float:left;
|
|
width:200px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
text-align: center;
|
|
}
|
|
.sheet-effect{
|
|
float:left;
|
|
width:400px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-item{
|
|
float:left;
|
|
width:160px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
text-align: center;
|
|
}
|
|
.sheet-uses{
|
|
float:left;
|
|
width:40px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
text-align: center;
|
|
}
|
|
/*=================== BOTO TEXT BOX SKILL & ITEMS CSS ===================*/
|
|
|
|
.charsheet button[type="roll"].sheet-textbox:before{
|
|
content: ' ';
|
|
}
|
|
|
|
.charsheet button[type="roll"].sheet-textbox:hover{
|
|
background-position: 0;
|
|
}
|
|
|
|
.charsheet button[type="roll"].sheet-textbox{
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Fire Emblem/images/Fire-emblem-chatC-30px.png");
|
|
background-size: 24px 24px;
|
|
background-repeat: no-repeat;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
margin: 2px 0px 0px 5px;
|
|
}
|
|
|
|
/*============= WEAPONS CSS =============*/
|
|
|
|
.sheet-weapon-big{
|
|
float:left;
|
|
width:100px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
padding: 5px 0px 0px;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
}
|
|
.sheet-weapon-small{
|
|
float:left;
|
|
width:68px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
padding: 5px 0px 0px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.sheet-combatA{
|
|
float:left;
|
|
width:100px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
}
|
|
.sheet-combatB{
|
|
float:left;
|
|
width:150px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.sheet-combatC{
|
|
float:left;
|
|
width:200px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
}
|
|
.sheet-combatD{
|
|
float:left;
|
|
width:300px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
}
|
|
.sheet-combatE{
|
|
float:left;
|
|
width:450px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.sheet-container-weapon{
|
|
float:none;
|
|
width:550px;
|
|
height:auto;
|
|
margin: 5px auto;
|
|
padding: 10px;
|
|
border: double 5px #000000;
|
|
background-color:burlywood;
|
|
}
|
|
|
|
/*=================== BACKGROUND CSS ===================*/
|
|
.sheet-inputbackground{
|
|
width:150px;
|
|
height:30px;
|
|
margin:0px 0px;
|
|
border: solid 2px #000000;
|
|
}
|
|
|
|
.sheet-tinny-black{
|
|
float:left;
|
|
position:relative;
|
|
width:100px;
|
|
height:25px;
|
|
margin: 0px auto 0px;
|
|
padding: 3px 0px 0px;
|
|
font-family: "Vollkorn SC", serif;
|
|
font-size: 18px;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
background-color: #000000;
|
|
}
|
|
|
|
.sheet-titol-back{
|
|
float:left;
|
|
position:relative;
|
|
width:100%;
|
|
height:24px;
|
|
margin: 5px auto 0px;
|
|
padding: 0px;
|
|
font-family: "Vollkorn SC", serif;
|
|
font-size: 18px;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
background-color: #000000;
|
|
}
|
|
|
|
.sheet-fotoavatar{
|
|
float: left;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: auto;
|
|
min-height: 380px;
|
|
max-height: 380px;
|
|
margin: 0px 0px 0px;
|
|
overflow: hidden;
|
|
background-color: #F5F5F5;
|
|
border: 1px solid #ccc;
|
|
}
|
|
.sheet-fotoavatar img{
|
|
float: none;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: auto;
|
|
position: relative;
|
|
margin: 0px;
|
|
padding: 0px 0px 0px 0px;
|
|
text-align: center;
|
|
}
|
|
.sheet-title-notes{
|
|
float:left;
|
|
position:relative;
|
|
width:100%;
|
|
height:30px;
|
|
margin: 0px 0px 0px;
|
|
padding: 0px 0px;
|
|
font-family: "Vollkorn SC", serif;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
}
|
|
|
|
/*============= ABILITIES CSS =============*/
|
|
|
|
.sheet-stats-marge{
|
|
float:left;
|
|
width:35px;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
}
|
|
|
|
.sheet-abilityA{
|
|
float:left;
|
|
width:260px;
|
|
height:auto;
|
|
}
|
|
.sheet-abilityB{
|
|
float:left;
|
|
width:150px;
|
|
height:auto;
|
|
}
|
|
|
|
/*============= CHECK BOX CSS =============*/
|
|
.sheet-mycheck{
|
|
filter: hue-rotate(120deg) brightness(0.8);
|
|
}
|
|
/* filter: invert(100%) hue-rotate(1040deg) brightness(0.8); */
|
|
.sheet-mycheck:checked {
|
|
background-color: #FF0000;
|
|
}
|
|
|
|
/*============= ESPACIADORES Y SEPARADORES CSS =============*/
|
|
|
|
.sheet-espai-30{
|
|
float:left;
|
|
position:relative;
|
|
width:100%;
|
|
height:30px;
|
|
margin: 0px auto;
|
|
padding: 0px;
|
|
}
|
|
.sheet-espai-40{
|
|
float:none;
|
|
position:relative;
|
|
width:100%;
|
|
height:40px;
|
|
margin: 0px auto;
|
|
padding: 0px;
|
|
}
|
|
.sheet-espai-10{
|
|
float:left;
|
|
position:relative;
|
|
width:100%;
|
|
height:10px;
|
|
margin: 0px auto;
|
|
padding: 0px;
|
|
}
|
|
.sheet-line-separador{
|
|
float:none;
|
|
position:relative;
|
|
width:90%;
|
|
height:15px;
|
|
margin: 0px auto;
|
|
padding: 0px;
|
|
border-bottom: 1px solid #000000;
|
|
}
|
|
|
|
/*=================== FIRMA CSS ===================*/
|
|
|
|
.sheet-firma-foot{
|
|
float: none;
|
|
width: 100%;
|
|
height: 20px;
|
|
min-height: 20px;
|
|
margin: 5px auto ;
|
|
font-family: "Vollkorn SC", serif;
|
|
font-weight: 500;
|
|
font-size: 11px;
|
|
text-align: center;
|
|
}
|
|
|
|
/*=================== MEDIA CSS ===================*/
|
|
|
|
@media screen and (min-width: 940px){
|
|
.sheet-contenedorvj{
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding: 30px 10px 50px;
|
|
background-repeat: no-repeat;
|
|
background-size: auto;
|
|
background-position: center center;
|
|
box-sizing: border-box;
|
|
background-color:floralwhite;
|
|
}
|
|
}
|
|
@media screen and (min-width: 1000px){
|
|
.sheet-contenedorvj{
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding: 30px 10px 50px;
|
|
background-repeat: no-repeat;
|
|
background-size: auto;
|
|
background-position: center center;
|
|
box-sizing: border-box;
|
|
background-color:antiquewhite;
|
|
}
|
|
}
|
|
@media screen and (min-width: 1050px){
|
|
.sheet-contenedorvj{
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding: 30px 10px 50px;
|
|
background-repeat: no-repeat;
|
|
background-size: auto;
|
|
background-position: center center;
|
|
box-sizing: border-box;
|
|
background-color:lavender;
|
|
}
|
|
}
|
|
@media screen and (min-width: 1100px){
|
|
.sheet-contenedorvj{
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding: 30px 10px 50px;
|
|
background-repeat: no-repeat;
|
|
background-size: auto;
|
|
background-position: center center;
|
|
box-sizing: border-box;
|
|
background-color:burlywood;
|
|
}
|
|
}
|