Files
roll20-character-sheets/anime5e/anime5e.css
T
2025-10-02 13:45:52 +02:00

902 lines
19 KiB
CSS

/* CSS ANIME 5E */
/* Character sheet for ROll20 by VJ Rolmasters*/
@import url('https://fonts.googleapis.com/css2?family=Bevan:ital@0;1&family=Mynerve&family=Vollkorn+SC:wght@400;600;700;900&display=swap');
/*============= FONTS CSS =============*/
.bevan-regular {
font-family: "Bevan", serif;
font-weight: 400;
font-style: normal;
}
.bevan-regular-italic {
font-family: "Bevan", serif;
font-weight: 400;
font-style: italic;
}
.mynerve-regular {
font-family: "Mynerve", cursive;
font-weight: 400;
font-style: normal;
}
.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-cosmenu{
float: none;
width: 100%;
height: auto;
min-height: 1000px;
margin: 0px auto ;
}
/* configure the tab buttons */
.charsheet .sheet-character,
.charsheet .sheet-combat,
.charsheet .sheet-background,
.charsheet .sheet-attributes{
display: none;
}
/* style the active button */
.charsheet .sheet-tabstoggle[value="character"] ~ div .sheet-button0 {background-color: #660001 !important; color: #FFDD00 !important;}
.charsheet .sheet-tabstoggle[value="combat"] ~ div .sheet-button1 {background-color: #660001 !important; color: #FFDD00 !important;}
.charsheet .sheet-tabstoggle[value="attributes"] ~ div .sheet-button2 {background-color: #660001 !important; color: #FFDD00 !important;}
.charsheet .sheet-tabstoggle[value="background"] ~ div .sheet-button3 {background-color: #660001 !important; color: #FFDD00 !important;}
/* show the selected tab */
.charsheet .sheet-tabstoggle[value="character"] ~ div.sheet-character,
.charsheet .sheet-tabstoggle[value="combat"] ~ div.sheet-combat,
.charsheet .sheet-tabstoggle[value="attributes"] ~ div.sheet-attributes,
.charsheet .sheet-tabstoggle[value="background"] ~ div.sheet-background{
display: block;
}
.sheet-button0,
.sheet-button1,
.sheet-button2,
.sheet-button3{
width: auto;
background: #ed143d;
color: #ffffff;
margin: 0px 0px 0px 3px;
padding: 16px 25px;
text-align: center;
font-family: "Bevan", serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
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: #ffcc00;
color: #000000;
margin: 0px 0px 0px 3px;
padding: 16px 25px;
text-align: center;
font-family: "Bevan", serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
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: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/anime5e/images/SHEET_BACKGROUND_ANIME5E_A_860.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/*============= TOPBAR CSS =============*/
.sheet-topbar{
float: none;
width: 850px;
height: 115px;
min-height: 0px;
margin: 0px auto ;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/anime5e/images/ANIME5E_TOP_BAR.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.sheet-logo{
float:left;
position:relative;
width:312px;
height:115px;
margin: 0% 0% 0% 0%;
padding: 0px;
}
.sheet-charactername{
float:left;
position:relative;
width:310px;
height:115px;
margin: 0% 0% 0% 0%;
padding: 0px;
}
.sheet-playername{
float:left;
position:relative;
width:220px;
height:115px;
margin: 0% 0% 0% 0%;
padding: 0px;
}
.sheet-selectrolltype{
width: 150px;
height: 25px!important;
margin: 10px 0px 0px 32px !important;
padding: 0px 0px;
text-align: center;
color:#212121;
font-family: "Vollkorn SC", serif;
font-size: 14px;
border: 1px solid #212121;
background-color: transparent;
}
/*============= CHARACTER STATS TAB 1 CSS =============*/
.sheet-statsbar{
float: none;
width: 860px;
height: 665px;
min-height: 0px;
margin: 0px auto ;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/anime5e/images/ANIME5E_STATS.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.sheet-avatar-box{
float:left;
position:relative;
width:300px;
height:265px;
margin: 0% 0% 0% 0%;
padding: 0px;
}
.sheet-avatar-foto{
float: left;
position: relative;
box-sizing: border-box;
width: 240px;
height: auto;
min-height: 210px;
max-height: 210px;
margin: 30px 0px 0px 36px;
overflow: hidden;
}
.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-race-box{
float:left;
position:relative;
width:240px;
height:265px;
margin: 0% 0% 0% 0%;
padding: 0px;
font-family: "Mynerve", serif;
}
.sheet-class-box{
float:left;
position:relative;
width:300px;
height:265px;
margin: 0% 0% 0% 0%;
padding: 0px;
}
.sheet-stats-box{
float:left;
position:relative;
width:142px;
height:250px;
margin: 0% 0% 0% 0px;
padding: 0px;
}
.btnanime5e{
}
.sheet-profiabilitybox{
float: left;
position: relative;
width: 125px;
height: 18px;
margin: 0px 0px 0px 0px;
padding: 2px 0px 0px 0px;
font-family: "Bevan", serif;
font-size: 12px;
border: 1px solid #000000;
}
.sheet-roundstats1-box{
float:left;
position:relative;
width:145px;
height:130px;
margin: 0% 0% 0% 0px;
padding: 0px;
}
.sheet-roundstats2-box{
float:left;
position:relative;
width:200px;
height:130px;
margin: 0% 0% 0% 0px;
padding: 0px;
}
.sheet-roundstats3-box{
float:left;
position:relative;
width:160px;
height:130px;
margin: 0% 0% 0% 0px;
padding: 0px;
}
.sheet-titles{
float:left;
position:relative;
width:100%;
height:30px;
margin: 5px 0px 10px;
padding: 0px;
font-family: "Bevan", serif;
font-size: 30px;
color: #000000;
text-align: center;
}
.sheet-proficienciesbar{
float: left;
width: 860px;
height: auto;
min-height: 320px;
margin: 0px auto ;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/anime5e/images/ANIME5E_BACKGROUND_PROFICIENCIES.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.sheet-proficienciesbox1{
float: left;
width: 140px;
height: auto;
min-height: 240px;
margin: 40px auto 0px ;
font-family: "Bevan", serif;
font-size: 17px;
color: #000000;
text-align: center;
}
.sheet-proficienciesbox2{
float: left;
width: 280px;
height: auto;
min-height: 200px;
margin: 40px auto 0px ;
font-family: "Bevan", serif;
font-size: 17px;
color: #000000;
text-align: center;
}
/*=================== BACKGROUND TAB CSS ===================*/
.sheet-inputbackground{
width:150px;
height:30px;
margin:0px 0px;
text-align: center;
border: solid 2px #000000;
}
.sheet-tinny-black{
float:left;
position:relative;
width:150px;
height:25px;
margin: 0px auto 0px;
padding: 3px 0px 0px;
font-family: "Bevan", serif;
font-size: 18px;
color: #FFFFFF;
text-align: center;
background-color: #000000;
}
.sheet-titol-black{
float:left;
position:relative;
width:100%;
height:24px;
margin: 5px auto 0px;
padding: 10px 0px;
font-family: "Bevan", 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: "Bevan", serif;
font-size: 18px;
text-align: center;
}
/*============= ATRIBUTES TAB CSS =============*/
.sheet-attribute-tiny{
float:left;
position:relative;
width:80px;
height:25px;
margin: 0px 0px 0px;
padding: 0px 0px;
font-family: "Vollkorn SC", serif;
font-size: 18px;
text-align: center;
}
.sheet-attribute-medium{
float:left;
position:relative;
width:130px;
height:25px;
margin: 0px 0px 0px;
padding: 0px 0px;
font-family: "Vollkorn SC", serif;
font-size: 18px;
text-align: center;
}
.sheet-attribute-medium1{
float:left;
position:relative;
width:150px;
height:25px;
margin: 0px 0px 0px;
padding: 0px 0px;
font-family: "Vollkorn SC", serif;
font-size: 18px;
text-align: center;
}
.sheet-attribute-medium2{
float:left;
position:relative;
width:200px;
height:25px;
margin: 0px 0px 0px;
padding: 0px 0px;
font-family: "Vollkorn SC", serif;
font-size: 18px;
text-align: center;
}
.sheet-attribute-big{
float:left;
position:relative;
width:230px;
height:25px;
margin: 0px 0px 0px;
padding: 0px 0px;
font-family: "Vollkorn SC", serif;
font-size: 18px;
text-align: center;
}
.sheet-titlesmall{
float:left;
position:relative;
width:100%;
height:30px;
margin: 0% 0% 0% 0px;
padding: 10px 0px;
font-family: "Vollkorn SC", serif;
font-size: 22px;
color: #000000;
text-align: center;
}
.sheet-magic-box{
float:left;
position:relative;
width:100%;
height:auto;
min-height: 300px;
margin: 5px auto 0px;
padding: 0px;
border: dotted 5px #000000;
}
.sheet-magic-prerounds{
float:left;
position:relative;
width:70px;
height:70px;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.sheet-magic-rounds{
float:left;
position:relative;
width:70px;
height:auto;
margin: 0px auto;
padding: 0px;
font-family: "Vollkorn SC", serif;
font-size: 16px;
text-align: center;
}
.sheet-armour-box{
float:left;
position:relative;
width:820px;
height:auto;
min-height: 100px;
margin: 5px auto 0px;
padding: 5px 0px 0px 0px;
border: dotted 5px #000000;
color: #000000;
}
.sheet-titlearmourbox{
float:left;
position:relative;
width:730px;
height:30px;
margin: 0px 0px 0px 30px;
padding: 0px;
}
/*============= GENERAL CSS =============*/
.sheet-characterinfo{
width:150px;
height:30px;
margin:0px 0px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: solid 2px #000000;
}
.sheet-characterinfo2{
width:200px;
height:30px;
margin:0px 0px;
border-top: none;
border-left: none;
border-right: none;
border-bottom: solid 2px #000000;
text-align: center; margin: 46px 0px 0px 10px; background-color: transparent; font-family: Mynerve; font-size: 20px
}
.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-columnaterscenter{
float:left;
position:relative;
width:32%;
height:auto;
margin: 0% auto;
padding: 0px;
text-align: center;
}
.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-columnaquinto{
float:left;
position:relative;
width:19%;
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 BORRAR =============*/
.sheet-stats-checkbox{
float:left;
width:47px;
height:30px;
margin: 0px auto;
padding: 5px 0px 0px;
text-align: center;
background-color:antiquewhite;
}
/*============= Jakob's Better Default Rolltemplate =============*/
/* Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-custom {
margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-custom {
margin-left: -7px;
}
.sheet-rolltemplate-custom .sheet-container {
border: 1px solid;
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
border-color: var(--header-bg-color);
}
/* Header formatting - title and subtitle */
.sheet-rolltemplate-custom .sheet-header {
background-color: #ed143d;
/* change text-align to center to center the header text */
text-align: left;
font-family: "Bevan", serif;
color: #ffffff;
padding: 5px;
-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-rolltemplate-custom .sheet-title {
font-size:1.2em;
margin: 1px 0px 0px 10px;
}
.sheet-rolltemplate-custom .sheet-subtitle {
font-size:.9em;
margin: 0px 0px 0px 10px;
}
/* example colors */
.sheet-rolltemplate-custom .sheet-container {
/* this is the default color */
--header-bg-color: rgba(112,32,130,1);
--header-text-color: #FFF;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-red {
--header-bg-color: #F00;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-green {
--header-bg-color: #0F0;
--header-text-color: #000;
}
/* Allprops part */
.sheet-rolltemplate-custom .sheet-content {
display: grid;
background: #FFF;
/* Header formatting - modify the column layout below */
grid-template-columns: auto auto;
/* Line height to match default roll template */
line-height:1.4em;
}
.sheet-rolltemplate-custom .sheet-content > div {
padding: 5px;
}
/* Left column */
.sheet-rolltemplate-custom .sheet-content .sheet-key {
font-weight: bold;
padding: 8px 10px 0px 0px;
text-align: right;
font-family: 'Vollkorn SC';
font-size: 17px;
}
/* Empty rule, use this if you want to change the right column
.sheet-rolltemplate-custom .sheet-value {
}
*/
/* Make even-numbered rows grey */
.sheet-rolltemplate-custom .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom .sheet-content :nth-child(4n) {
background:#EEE;
}
/* Description field */
.sheet-rolltemplate-custom .sheet-desc {
grid-column: span 2;
padding: 5px;
text-align: center;
}
/*============= ESPACIADORES Y SEPARADORES CSS =============*/
.sheet-espai-10{
float:left;
position:relative;
width:100%;
height:10px;
margin: 0px auto;
padding: 0px;
}
.sheet-espai-20{
float:left;
position:relative;
width:100%;
height:20px;
margin: 0px auto;
padding: 0px;
}
.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-line-separador5{
float:left;
position:relative;
width:100%;
height:5px;
margin: 3px auto 0px;
padding: 0px;
background-color: #ed143d;
}
.sheet-line-separador10{
float:left;
position:relative;
width:100%;
height:10px;
margin: 3px auto 0px;
padding: 0px;
background-color: #ed143d;
}
.sheet-line-separador15{
float:left;
position:relative;
width:100%;
height:15px;
margin: 3px auto 0px;
padding: 0px;
background-color: #ed143d;
}
/*=================== FIRMA CSS ===================*/
.sheet-firma-foot{
float: none;
width: 100%;
height: 20px;
min-height: 20px;
margin: 5px auto ;
font-family: "Bevan", 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;
}
}