/* CSS EXTINCION - THE HILL PRESS */ /* Character sheet for ROll20 by VJ Rolmasters*/ @import url('https://fonts.googleapis.com/css2?family=Anta&family=Brawler:wght@400;700&family=Dosis:wght@200..800&family=Electrolize&display=swap'); /*============= FONTS CSS =============*/ .dosis { font-family: "Dosis", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } .brawler-regular { font-family: "Brawler", serif; font-weight: 400; font-style: normal; } .brawler-bold { font-family: "Brawler", serif; font-weight: 700; font-style: normal; } .electrolize-regular { font-family: "Electrolize", sans-serif; font-weight: 400; font-style: normal; } .anta-regular { font-family: "Anta", sans-serif; font-weight: 400; font-style: normal; } /* BASIC TAB STYLES - CORREGIDO */ .sheet-contenedorvj { float: left; position: relative; width: 860px; height: auto; min-height: 1199px; margin: 0px auto; background-image: none; background-repeat: no-repeat; background-size:cover; background-position: center; } .sheet-container { position: relative; float: left; width: 860px; margin: 0px 0px 0px 0px; min-height: 1000px; } .sheet-extincion1 { float: left; position: relative; width: 860px; height: 630px; min-height: 630px; margin: 0px auto; background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Extincion/images/EXTINCION_FONDO_A4_860px.jpg"); background-repeat: no-repeat; background-size:cover; background-position: center; border:1px solid #000000; } .sheet-extincion2 { float: left; position: relative; width: 860px; height: auto; min-height: 630px; margin: 0px auto; border:1px solid #000000; overflow: auto; } .sheet-width100{ float:left; position:relative; width:100%; height:auto; min-height: 23px; margin: 0px 0px; padding: 0px 0px; box-sizing: border-box; display: inline-block; } .sheet-caracteristicas-column{ float:left; position:relative; width:260px; height:auto; min-height: 630px; margin: 0px 0px 0px 60px; padding: 0px 0px; box-sizing: border-box; display: inline-block; } .sheet-avatar-box { float: left; position: relative; width: 202px; height: 241px; margin: 33px 0% 0% 33px; padding: 0px; overflow: hidden; } .sheet-carbox1 { float: left; position: relative; width: 86px; height: 86px; margin: 0px 0% 0% 0px; padding: 0px; } .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: "Anta", sans-serif; color:#000000; -webkit-inner-spin-button: none; -webkit-outer-spin-button: none; -moz-appearance: textfield; -webkit-appearance: none; } .sheet-informacionpj-column{ float:left; position:relative; width:535px; height:auto; min-height: 630px; margin: 0px 0px 0px 0px; padding: 0px 0px; box-sizing: border-box; display: inline-block; } .sheet-espai-28{ float:left; position:relative; width:100%; height:auto; min-height: 28px; margin: 0px 0px 0px 0px; padding: 0px 0px; box-sizing: border-box; display: inline-block; } .sheet-infopj-44{ float:left; position:relative; width:100%; height:auto; min-height: 44px; margin: 0px 0px 0px 0px; padding: 0px 0px; box-sizing: border-box; display: inline-block; } .sheet-etiquetanegra{ float: left; width: auto; height:auto; margin:0px 0px; padding: 0px 15px 0px 15px ; text-align: left; font-size: 30px; font-family: "Dosis", sans-serif; background-color: #000000; color: #ffffff; } .sheet-barranegra{ float: left; width: 100%; height:40px; margin:0px 0px; padding: 0px 0px 0px 0px ; text-align: center; font-size: 26px; font-family: "Dosis", sans-serif; background-color: #000000; color: #ffffff; } .sheet-characterinfo{ height:18px; padding: 10px 0px 0px 10px ; border-top: none; border-left: none ; border-right: none; border-bottom: none; outline: 0px; background-color: transparent; text-align: left; font-size: 18px; font-family: "Brawler", serif; } .sheet-characterinfo2{ height:18px; padding: 2px 0px 0px 10px ; border-top: none; border-left: none ; border-right: none; border-bottom: none; outline: 0px; background-color: transparent; text-align: left; font-size: 24px; font-family: "Brawler", serif; } .sheet-check-options{ float:left; width: 15px!important; height: 15px!important; color:black; accent-color:black; border-color: black; } .sheet-experiencia{ float: left; position: relative; width: 100%; height:auto; min-height: 200px; margin: 12px 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: 16px; font-family: "Brawler", serif; } .bold-text { font-weight: bold; } .sheet-impactobox{ float: left; position: relative; width: 100%; height:auto; min-height: 70px; margin: 0px 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: 16px; font-family: "Brawler", serif; } .sheet-impactobox2{ float: left; position: relative; width: 100%; height:auto; min-height: 35px; margin: 15px 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: 16px; font-family: "Brawler", serif; } .sheet-tiradasecreta{ float: left; position: relative; 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: 16px; font-family: "Brawler", serif; } .sheet-valorcaracteristicas2{ float: left; width: 70px !important; height: 50px !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: 22px; font-family: "Anta", sans-serif; color:#000000; -webkit-inner-spin-button: none; -webkit-outer-spin-button: none; -moz-appearance: textfield; -webkit-appearance: none; } .sheet-valorcaracteristicas3{ float: left; width: 70px !important; height: 40px !important; border: 1px solid #000000; outline: 0px; text-align: center; background-color: transparent !important; font-weight: bold; font-size: 22px; font-family: "Anta", sans-serif; color:#000000; -webkit-inner-spin-button: none; -webkit-outer-spin-button: none; -moz-appearance: textfield; -webkit-appearance: none; } .sheet-barralanzadados{ float: right; width: 100px; height: auto; min-height: 30px; margin: 0px 10px 0px 0px; border: 2px solid #000000; text-align: center; color: #000000; font-family: "Boldonse", system-ui; font-size: 11px; cursor: pointer; } /*============= CONTENEDORES Y COLUMNAS CSS =============*/ .sheet-clearfloat { clear:both; height:0; font-size: 0px; line-height:0px; } .sheet-espai100{ float: left; position: relative; width: 100%; height: 100px; margin: 0px auto; } .ui-dialog .charsheet { padding: 0px 0px; } /*============= EXTINCION 2 : TAB 2 CSS =============*/ .sheet-armasinputbox2B, .sheet-armasinputbox3B, .sheet-armasinputbox4B{ float: left; height: 25px !important; margin-left: 5px; border: none; border-bottom: 1px solid #000 !important; outline: none; background: transparent !important; font-family: "Brawler", serif; font-size: 14px; font-weight: bold; text-align: center; color: #000; appearance: textfield; /* reemplaza a -webkit y -moz */ } .sheet-armasinputbox2B { width: 115px !important; } .sheet-armasinputbox3B { width: 57px !important; } .sheet-armasinputbox4B { width: 40px !important; } .sheet-item1A{ float: left; width: 700px !important; height: 30px !important; margin: 0px 0px 0px 40px; border: none; border-bottom: 1px solid #000 !important; outline: none; background: transparent !important; font-family: "Brawler", serif; font-size: 14px; font-weight: bold; text-align: left; color: #000; appearance: textfield; /* reemplaza a -webkit y -moz */ } .sheet-item1detalles{ float: none; width: 800px; height: auto; min-height: 35px; margin: 0px auto 5px ; } .sheet-item1detalles textarea{ float: none; width: 800px; height: 30px; min-height: 50px; margin: 5px 5px; resize: vertical; box-sizing: border-box; outline: 0px; font-family: "Brawler", serif; font-size: 14px; color: #000000; background-color: transparent; border: 1px solid #000000; } .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: "Brawler", serif; font-size: 14px; font-weight: bold; text-align: center; color: #000; -moz-appearance: textfield; -webkit-appearance: none; } .sheet-armaselect-A { width: 45px !important; } .sheet-armaselect-B { width: 115px !important; } .sheet-item2A{ float: left; width: 180px !important; height: 30px !important; margin: 0px 0px 0px 40px; border: none; border-bottom: 1px solid #000 !important; outline: none; background: transparent !important; font-family: "Brawler", serif; 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: "Brawler", serif; 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: "Brawler", serif; font-size: 14px; font-weight: bold; text-align: left; color: #000; appearance: textfield; /* reemplaza a -webkit y -moz */ } .sheet-item2detalles{ float: none; width: 800px; height: auto; min-height: 35px; margin: 0px auto 5px ; } .sheet-item2detalles textarea{ float: none; width: 800px; height: 30px; min-height: 50px; margin: 5px 5px; resize: vertical; box-sizing: border-box; outline: 0px; font-family: "Brawler", serif; font-size: 14px; color: #000000; background-color: transparent; border: 1px solid #000000; } /*============= DETAILS CSS =============*/ details{ color: #000000 !important; padding: 10px 0px 0px; cursor: pointer; font-family: "Brawler", serif; font-size: 14px; } details:hover{ color: #ff0000 !important; padding: 10px 0px 0px; cursor: pointer; font-family: "Brawler", serif; font-size: 14px; } /*============= GENERAL CSS =============*/ .sheet-80{ float:left; position:relative; width:80%; height:auto; margin: 0px 0px 0px 20%; padding: 0px 0px; box-sizing: border-box; display: inline-block; } .sheet-cos100{ float: none; width: 100%; height: auto; min-height: 40px; margin: 0px auto ; } .sheet-columnaters{ float:left; position:relative; width:240px; height:auto; min-height: 200px; margin: 0% 5px 0px 5px; padding: 0px; } .sheet-columnadosters{ float:left; position:relative; width: 480px; height:auto; min-height: 200px; margin: 0px 0px 0px 14px; padding: 0px; } .sheet-columnamig{ float:left; position:relative; width:49%; height:auto; margin: 0% 0% 0% 1%; padding: 0px; } .sheet-columnacinc{ float:left; position:relative; width:20%; height:auto; margin: 0% 0% 0% 0%; padding: 0px; } .sheet-columnasis{ float:left; position:relative; width:16%; height:auto; margin: 0% 0% 0% 0%; padding: 0px; } .sheet-ampladatotal30{ float:none; width:100%; height:30px; display: inline-block; } /*============= 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-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-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-firma-foot{ float: left; width: 100%; height: 20px; min-height: 20px; margin: 20px auto 5px; font-family: "Electrolize", sans-serif; font-weight: 500; font-size: 10px; text-align: center; color: #000000; } /*=================== EXTINCION ROLL ROLLTEMPLATE CSS ===================*/ /* Smaller margins - remove these if you want the huge default left margin */ .sheet-rolltemplate-extincion { margin-left: -37px; } .sheet-rolltemplate-extincion .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: none; border-left: 10px solid #000000; border-right: 10px solid #000000; border-bottom: 10px solid #000000; } /* Header formatting - title and subtitle */ .sheet-rolltemplate-extincion .sheet-header { height: 45px; background-color: #000000; /* change text-align to center to center the header text */ padding: 5px; } .sheet-rolltemplate-extincion .sheet-title { font-size: 20px; margin: 6px 0px 0px 0px; text-align: center; color: #ffffff; text-transform: uppercase; font-weight: bold; } .sheet-rolltemplate-extincion .sheet-subtitle { font-size:12px; margin: 2px 0px 0px 0px; text-align: center; color: #ffffff; } .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-extincion .sheet-contento :nth-child(4n+3), .sheet-rolltemplate-extincion .sheet-contento :nth-child(4n) { background-color: transparent !important; border: none!important; } .sheet-rolltemplate-extincion .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: "Brawler", serif; font-weight: 400; font-size: 16px; font-style: normal; } .sheet-rolltemplate-extincion .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: "Brawler", serif; font-weight: 400; font-size: 20px; font-style: normal; } /*=================== EXTINCION DADOS ROLL ROLLTEMPLATE CSS ===================*/ /* Smaller margins - remove these if you want the huge default left margin */ .sheet-rolltemplate-extinciondados { margin-left: -37px; } .sheet-rolltemplate-extinciondados .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: none; border-left: 10px solid #000000; border-right: 10px solid #000000; border-bottom: 10px solid #000000; } /* Header formatting - title and subtitle */ .sheet-rolltemplate-extinciondados .sheet-header { height: 45px; background-color: #000000; /* change text-align to center to center the header text */ padding: 5px; } .sheet-rolltemplate-extinciondados .sheet-title { font-size: 20px; margin: 6px 0px 0px 0px; text-align: center; color: #ffffff; text-transform: uppercase; font-weight: bold; } .sheet-rolltemplate-extinciondados .sheet-subtitle { font-size:12px; margin: 2px 0px 0px 0px; text-align: center; color: #ffffff; } .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-extinciondados .sheet-contento :nth-child(4n+3), .sheet-rolltemplate-extinciondados .sheet-contento :nth-child(4n) { background-color: transparent !important; border: none!important; } .sheet-rolltemplate-extinciondados .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: "Brawler", serif; font-weight: 400; font-size: 16px; font-style: normal; } .sheet-rolltemplate-extinciondados .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: "Brawler", serif; font-weight: 400; font-size: 20px; font-style: normal; } /*============= 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; } /*============= VJBTN GRANDE EXTINCION 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: #000000 !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: #ff0000 !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: #8e1605 !important; content:"A"; } .ui-dialog .charsheet button[type=roll]::before { font-family: dicefontd20; border: none; background-color: transparent; content:"A"; } /*============= VJBTN PEQUEÑO EXTINCION 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: #000000 !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: #ff0000 !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: #8e1605 !important; content:"A"; } /*=================== MEDIA CSS ===================*/ @media screen and (min-width: 940px){ } @media screen and (min-width: 1300px){ .sheet-contenedorvj { position: relative; width: 1725px; height: auto; min-height: 630px; margin: 0px auto; background-image: none; background-repeat: no-repeat; background-size:cover; background-position: center; } .sheet-container { position: relative; float: left; width: 1725px; margin: 0px 0px 0px 0px; min-height: 630px; } .sheet-firma-foot{ float: left; width: 100%; height: 20px; min-height: 20px; margin: 20px auto 5px; font-family: "Electrolize", sans-serif; font-weight: 500; font-size: 10px; text-align: right; color: #000000; } }