mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
811 lines
12 KiB
CSS
811 lines
12 KiB
CSS
|
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,100&display=swap');
|
|
|
|
|
|
/* BOTÕES */
|
|
/*Configure the tab buttons*/
|
|
.sheet-character,
|
|
.sheet-config,
|
|
.sheet-journal {
|
|
display: none;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
.sheet-tabstoggle[value="character"] ~ div.sheet-character,
|
|
.sheet-tabstoggle[value="configuration"] ~ div.sheet-config,
|
|
.sheet-tabstoggle[value="journal"] ~ div.sheet-journal {
|
|
display: block;
|
|
}
|
|
|
|
button[type="action"].tab-btn {
|
|
background: #231f20;
|
|
color: #fff;
|
|
width: 200px;
|
|
font-size: 1.250em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
button[type="action"].txt-btn::before {
|
|
content: ' ';
|
|
}
|
|
|
|
button[type="action"].txt-btn {
|
|
height: 22px;
|
|
border-style: none;
|
|
background-color: transparent;
|
|
margin-left: 5px;
|
|
font-weight: bold;
|
|
padding: 2px 5px 4px 5px;
|
|
|
|
}
|
|
|
|
button[type="action"].txt-btn h3 {
|
|
transition: 0.8s ease;
|
|
text-align: left;
|
|
}
|
|
|
|
button[type="action"].txt-btn h3:hover {
|
|
color: #6bd36b;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* BOTÕES FIM */
|
|
|
|
/* ESTILOS GERAIS */
|
|
|
|
|
|
/* FIM ESTILOS GERAIS */
|
|
|
|
/* ESTRUTURA GRID */
|
|
.gridstructure {
|
|
display: grid;
|
|
width: 810px;
|
|
grid-template-columns: 250px 250px 300px;
|
|
grid-row-gap: 5px;
|
|
grid-column-gap: 5px;
|
|
grid-template-areas:
|
|
"header header header"
|
|
"aspecto aspecto facanha"
|
|
"atributo atributo ludico"
|
|
"habilidade habilidade pool "
|
|
"habilidade habilidade recurso"
|
|
"footer footer footer";
|
|
color: #231f20;
|
|
font-family: 'Roboto', sans-serif;
|
|
background: #fffafb;
|
|
}
|
|
|
|
.gridstructure textarea {
|
|
resize: none;
|
|
}
|
|
|
|
.gridstructure span {
|
|
font-size: 0.750em;
|
|
}
|
|
|
|
/* ESTILO GERAL */
|
|
|
|
|
|
/* FIM ESTRUTURA GRID */
|
|
|
|
/* HEADER */
|
|
.gridheader {
|
|
grid-area: header;
|
|
padding: 0px 10px;
|
|
background: #231f20;
|
|
color: #fff;
|
|
}
|
|
|
|
.header {
|
|
display: grid;
|
|
grid-template-columns: 400px 400px;
|
|
grid-template-areas:
|
|
"nome logo"
|
|
"descricao marco";
|
|
margin: 0 auto;
|
|
padding: 10px 0px;
|
|
}
|
|
|
|
.nome {
|
|
grid-area: nome;
|
|
display: flex;
|
|
}
|
|
|
|
.nome label {
|
|
color: #fff;
|
|
}
|
|
|
|
.logo {
|
|
grid-area: logo;
|
|
margin-left: 70px;
|
|
}
|
|
|
|
.logo img {
|
|
width: 300px;
|
|
}
|
|
|
|
.descricao {
|
|
grid-area: descricao;
|
|
}
|
|
|
|
.descricao label {
|
|
color: #fff;
|
|
}
|
|
|
|
.descricao textarea {
|
|
height: 50px;
|
|
width: 420px;
|
|
font-size: 1.250em;
|
|
}
|
|
|
|
.marconarrativo {
|
|
grid-area: marco;
|
|
margin-left: 55px;
|
|
}
|
|
|
|
.marconarrativo label {
|
|
color: #fff;
|
|
}
|
|
|
|
.marcodot {
|
|
display: flex;
|
|
justify-content: left;
|
|
}
|
|
|
|
input[type="checkbox"].marcodot {
|
|
color: #7f66aa;
|
|
}
|
|
|
|
.marcodot label {
|
|
text-align: center;
|
|
}
|
|
|
|
.marcodot label + label {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
/* FIM HEADER */
|
|
|
|
/* ASPECTOS */
|
|
.gridaspecto {
|
|
background: #231f20;
|
|
width: 100%;
|
|
grid-area: aspecto;
|
|
padding: 20px 0px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.gridaspecto h2 {
|
|
text-align: center;
|
|
color: #fff;
|
|
width: 400px;
|
|
}
|
|
|
|
.gridaspecto span {
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
.aspectos {
|
|
padding: 10px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.aspectos label {
|
|
color: #fff;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.aspectos label + label {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.aspectos input {
|
|
width: 400px;
|
|
font-size: 1.250em;
|
|
}
|
|
|
|
/* FIM ASPECTOS */
|
|
/* ATRIUBTOS */
|
|
.gridatributo {
|
|
width: 100%;
|
|
grid-area: atributo;
|
|
text-align: center;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.gridatributo p {
|
|
color: #231f20;
|
|
font-size: 0.750em;
|
|
}
|
|
|
|
.atributos {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
}
|
|
|
|
.atributos label {
|
|
text-align:center;
|
|
padding: 5px;
|
|
}
|
|
|
|
.atributos h3 {
|
|
text-align: left;
|
|
}
|
|
|
|
.input-atributo {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
width: 200px;
|
|
}
|
|
|
|
.diceatributo input[type="radio"] {
|
|
position: fixed;
|
|
width: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.diceatributo label {
|
|
color: #231f20;
|
|
padding: 7px 7px;
|
|
text-align: center;
|
|
vertical-align: center;
|
|
font-size: 2.50em;
|
|
transition: 0.8s ease;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
.diceatributo input + label {
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.diceatributo label:hover {
|
|
color:#6bd36b;
|
|
box-shadow: inset 0 0 7px rgb(95, 95, 95);
|
|
}
|
|
|
|
.diceatributo input[type="radio"]:checked + label {
|
|
background: #fff;
|
|
color: #6bd36b;
|
|
box-shadow: inset 0 0 7px rgb(95, 95, 95);
|
|
}
|
|
/* FIM ATRIBUTOS */
|
|
|
|
/* INICIO PONTOS */
|
|
.gridludico {
|
|
grid-area: ludico;
|
|
}
|
|
|
|
.gridludico h3 {
|
|
text-align: center;
|
|
}
|
|
|
|
.gridludico p {
|
|
color: #231f20;
|
|
font-size: 0.750em;
|
|
text-align: center;
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
/* PONTOS LÚDICOS */
|
|
.pontosludicos input::-webkit-outer-spin-button,
|
|
.pontosludicos input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.pontosludicos input {
|
|
text-align: center;
|
|
color: #231f20;
|
|
font-weight: bold;
|
|
font-size: 1.75em;
|
|
vertical-align: center;
|
|
width: 10px;
|
|
height: 10px;
|
|
border: solid 3px #231f20;
|
|
}
|
|
|
|
.pontosludicos {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.pontosludicos div {
|
|
padding: 0px 50px;
|
|
}
|
|
|
|
.pontosludicos label {
|
|
text-align: center;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
/* FIM PONTOS LÚDICOS */
|
|
|
|
/* VIDA E ENERGIA */
|
|
.energiasaude h3 {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.energiasaude p {
|
|
margin-top: -8px;
|
|
}
|
|
|
|
.energia-vida input::-webkit-outer-spin-button,
|
|
.energia-vida input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.energia-vida input {
|
|
text-align: center;
|
|
color: #231f20;
|
|
font-weight: bold;
|
|
font-size: 1.250em;
|
|
vertical-align: center;
|
|
width: 10px;
|
|
height: 10px;
|
|
border: solid 3px #231f20;
|
|
}
|
|
|
|
.energia-vida {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-around;
|
|
vertical-align: center;
|
|
}
|
|
|
|
.energia-vida h3 {
|
|
margin-bottom: -5px;
|
|
text-align: center;
|
|
}
|
|
|
|
.trauma h3 {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.input-energiavida {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
vertical-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.diceatributo input[type="radio"] {
|
|
position: fixed;
|
|
width: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.dicevidaenergia label {
|
|
color: #231f20;
|
|
padding: 2px 2px;
|
|
text-align: center;
|
|
vertical-align: center;
|
|
font-size: 1.250em;
|
|
transition: 0.8s ease;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
.dicevidaenergia input + label {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.dicevidaenergia label:hover {
|
|
color:#6bd36b;
|
|
box-shadow: inset 0 0 7px rgb(95, 95, 95);
|
|
}
|
|
|
|
.dicevidaenergia input[type="radio"]:checked + label {
|
|
background: #fff;
|
|
color: #6bd36b;
|
|
box-shadow: inset 0 0 7px rgb(95, 95, 95);
|
|
}
|
|
|
|
/* FIM VIDA E ENERGIA */
|
|
|
|
|
|
|
|
/* FIM PONTOS */
|
|
|
|
/* INICIO HABILIDADES */
|
|
.gridhabilidades {
|
|
width: 100%;
|
|
grid-area: habilidade;
|
|
text-align: center;
|
|
background: #231f20;
|
|
color: #fff;
|
|
}
|
|
|
|
.gridhabilidades h2 {
|
|
color: #fff;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.gridhabilidades p {
|
|
color: #fff;
|
|
font-size: 0.750em;
|
|
}
|
|
|
|
.habilidades {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
}
|
|
|
|
.habilidades label {
|
|
text-align:center;
|
|
padding: 5px;
|
|
}
|
|
|
|
.habilidades h3 {
|
|
text-align: left;
|
|
color: #fff;
|
|
margin: 5px;
|
|
margin-left: -20px;
|
|
}
|
|
|
|
.input-habilidades {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
width: 180px;
|
|
}
|
|
|
|
.input-text {
|
|
background: #231f20;
|
|
color: #fff;
|
|
border: none;
|
|
width: 200px;
|
|
font-weight: bold;
|
|
text-transform: capitalize;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dicehabilidades input[type="radio"] {
|
|
position: fixed;
|
|
width: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.dicehabilidades label {
|
|
color: #fff;
|
|
padding: 6px 6px;
|
|
text-align: center;
|
|
vertical-align: center;
|
|
font-size: 2.250em;
|
|
transition: 0.8s ease;
|
|
|
|
}
|
|
|
|
|
|
.dicehabilidades input + label {
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.dicehabilidades label:hover {
|
|
color:#6bd36b;
|
|
box-shadow: inset 0 0 4px rgb(216, 216, 216);
|
|
}
|
|
|
|
.dicehabilidades input[type="radio"]:checked + label {
|
|
background: #5e5457;
|
|
color: #6bd36b;
|
|
box-shadow: inset 0 0 4px rgb(216, 216, 216);
|
|
}
|
|
|
|
/* FIM HABILIDADES */
|
|
|
|
/* INICIO FACANHA */
|
|
|
|
.gridfacanha {
|
|
width: 100%;
|
|
grid-area: facanha;
|
|
text-align: center;
|
|
background: #231f20;
|
|
color: #fff;
|
|
}
|
|
|
|
.gridfacanha h2 {
|
|
color: #fff;
|
|
}
|
|
|
|
.gridfacanha p {
|
|
color: #fff;
|
|
font-size: 0.750em;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.facanha {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
|
|
.facanha input {
|
|
width: 150px;
|
|
height: 20px;
|
|
font-size: 1.250em;
|
|
}
|
|
|
|
.facanha h3 {
|
|
text-align: left;
|
|
color: #fff;
|
|
}
|
|
|
|
.input-facanha {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.dicefacanha input[type="radio"] {
|
|
position: fixed;
|
|
width: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.dicefacanha label {
|
|
color: #fff;
|
|
padding: 3px 3px;
|
|
text-align: center;
|
|
margin: auto;
|
|
vertical-align: center;
|
|
font-size: 1.50em;
|
|
transition: 0.8s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.dicefacanha input + label {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.dicefacanha label:hover {
|
|
color:#6bd36b;
|
|
box-shadow: inset 0 0 4px rgb(216, 216, 216);
|
|
}
|
|
|
|
.dicefacanha input[type="radio"]:checked + label {
|
|
background: #5e5457;
|
|
color: #6bd36b;
|
|
box-shadow: inset 0 0 4px rgb(216, 216, 216);
|
|
}
|
|
|
|
/* FIM FACANHA */
|
|
|
|
/* INICIO RECURSOS */
|
|
.gridrecursos {
|
|
width: 100%;
|
|
grid-area: recurso;
|
|
text-align: center;
|
|
background: #231f20;
|
|
color: #fff;
|
|
}
|
|
|
|
.gridrecursos h2 {
|
|
color: #fff;
|
|
}
|
|
|
|
.gridrecursos p {
|
|
color: #fff;
|
|
font-size: 0.750em;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.recursos {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
|
|
|
|
.recursos input {
|
|
width: 150px;
|
|
height: 20px;
|
|
font-size: 1.250em;
|
|
}
|
|
|
|
.recursos h3 {
|
|
text-align: left;
|
|
color: #fff;
|
|
}
|
|
|
|
.input-recursos {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.dicerecurso input[type="radio"] {
|
|
position: fixed;
|
|
width: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
|
|
.dicerecurso label {
|
|
color: #fff;
|
|
padding: 3px 3px;
|
|
text-align: center;
|
|
margin: auto;
|
|
vertical-align: center;
|
|
font-size: 1.50em;
|
|
transition: 0.8s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.dicerecurso input + label {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.dicerecurso label:hover {
|
|
color:#6bd36b;
|
|
box-shadow: inset 0 0 4px rgb(216, 216, 216);
|
|
}
|
|
|
|
.dicerecurso input[type="radio"]:checked + label {
|
|
background: #5e5457;
|
|
color: #6bd36b;
|
|
box-shadow: inset 0 0 4px rgb(216, 216, 216);
|
|
}
|
|
|
|
/* FIM RECURSOS */
|
|
|
|
/* DICE POOL */
|
|
|
|
.gridpool {
|
|
width: 100%;
|
|
grid-area: pool;
|
|
}
|
|
|
|
.gridpool h2{
|
|
text-align: center;
|
|
}
|
|
|
|
.bg-dice {
|
|
width: 300px;
|
|
}
|
|
|
|
.input-shape {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.dicepool input[type="radio"] {
|
|
position: fixed;
|
|
width: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.dicepool label {
|
|
padding: 6px 4px;
|
|
text-align: center;
|
|
vertical-align: center;
|
|
font-size: 2.250em;
|
|
transition: 0.8s ease;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.dicepool label:hover {
|
|
box-shadow: inset 0 0 7px rgb(95, 95, 95);
|
|
|
|
}
|
|
|
|
.dicepool input + label {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.charsheet button[type="roll"].blank-button::before {
|
|
content: ' ';
|
|
}
|
|
|
|
.charsheet button[type="roll"].blank-button {
|
|
color: #fff;
|
|
background: #6bd36b;
|
|
padding: 5px 15px;
|
|
transition: 0.8s ease;
|
|
}
|
|
|
|
.charsheet button[type="roll"].blank-button:hover {
|
|
background: #7f66aa;
|
|
box-shadow: inset 0 0 15px rgba(48, 48, 48, 0.8);
|
|
}
|
|
|
|
/* Cor seletora */
|
|
|
|
input[type="radio"]:checked + label {
|
|
color: #6bd36b;
|
|
box-shadow: inset 0 0 7px rgb(95, 95, 95);
|
|
}
|
|
|
|
/* Caractere do Dado */
|
|
|
|
.zerodice {
|
|
font-family: pictos;
|
|
color: #231f20;
|
|
transition: 0.8s ease;
|
|
}
|
|
|
|
.zerodice:hover {
|
|
color: #6bd36b;
|
|
box-shadow: inset 0 0 7px rgb(95, 95, 95);
|
|
}
|
|
|
|
.diced4 {
|
|
font-family: dicefontd4;
|
|
color: #231f20;
|
|
transition: 0.8s ease;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.diced4:hover {
|
|
color: #6bd36b;
|
|
box-shadow: inset 0 0 7px rgb(95, 95, 95);
|
|
}
|
|
|
|
.diced6 {
|
|
font-family: dicefontd6;
|
|
color: #231f20;
|
|
transition: 0.8s ease;
|
|
|
|
}
|
|
|
|
.diced6:hover {
|
|
color: #6bd36b;
|
|
box-shadow: inset 0 0 7px rgb(95, 95, 95);
|
|
}
|
|
|
|
.diced8 {
|
|
font-family: dicefontd8;
|
|
color: #231f20;
|
|
transition: 0.8s ease;
|
|
}
|
|
|
|
.diced8:hover {
|
|
color: #6bd36b;
|
|
box-shadow: inset 0 0 7px rgb(95, 95, 95);
|
|
}
|
|
|
|
.diced10 {
|
|
font-family: dicefontd10;
|
|
color: #231f20;
|
|
transition: 0.8s ease;
|
|
}
|
|
|
|
.diced10:hover {
|
|
color: #6bd36b;
|
|
box-shadow: inset 0 0 7px rgb(95, 95, 95);
|
|
}
|
|
|
|
.diced12 {
|
|
font-family: dicefontd12;
|
|
color: #231f20;
|
|
transition: 0.8s ease;
|
|
}
|
|
|
|
.diced12:hover {
|
|
color: #6bd36b;
|
|
box-shadow: inset 0 0 7px rgb(95, 95, 95);
|
|
}
|
|
|
|
/* Rolar Botão */
|
|
|
|
.blank-button::before {
|
|
content: "";
|
|
}
|
|
|
|
|
|
/* FIM DICE POOL*/
|