Files
roll20-character-sheets/3DX/3dx.css
T
Vitones91 77ed652635 Added more lines for skills
Added more lines for skills and a bug in Firefox and Chrome regarding the size of the boxes was fixed.
2023-12-07 10:53:37 -03:00

1019 lines
21 KiB
CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, button, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: none;
font-size: 100%;
font: inherit;
text-decoration: none;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
color: inherit;
}
textarea {
resize: none;
}
.characterviewer label {
font-weight: normal;
font-size: 0.75rem;
margin-bottom: 0;
}
.largedialog label {
padding-right: 0rem;
text-align: center;
}
.largedialog textarea {
height: 100%;
padding-inline: 0.3rem;
width: calc(100% - 0.6rem);
}
.ui-dialog .charsheet input {
height: 100%;
}
.ui-dialog .charsheet {
padding: 0px;
}
input, textarea, select, .uneditable-input {
border-radius: 0px;
height: 100%;
line-height: 1;
margin-bottom: 0px;
padding: 0px;
width: 100%;
-webkit-border-radius: 0px;
}
label, input, button, select, textarea {
line-height: 1;
}
.ui-dialog .charsheet button[type="roll"], .ui-dialog .charsheet button[type="compendium"] {
align-items: center;
display: flex;
font-size: 1.1rem;
height: 100%;
}
.btn, .btn.btn-default {
box-shadow: none;
-webkit-box-shadow: none;
text-shadow: none;
}
.Root {
--background: #181818;
--backgroundbutton: #111111;
--boxbg: #303030;
--boxborder: #404040;
--fonttitle: #D3D3D3;
--fontsub: #a0a0a0;
background: var(--background);
}
.Hidden {
opacity: 0%;
}
.OpenSans {
color: var(--fonttitle);
font-family: Arial;
font-size: 0.75rem;
font-weight:normal;
letter-spacing: 0.01rem;
line-height: 0.9rem;
text-align: center;
}
#subtitle {
font-size: 0.55rem;
}
.Header {
display: flex;
justify-content: space-between;
margin-bottom: 1.5rem;
padding-inline: 2%;
padding-top: 1.5rem;
width: 96%;
}
.Nivel_P__Section {
width: 4.5%;
}
.Nivel_P__Box {
align-items: center;
display: flex;
border: solid thin var(--boxborder);
border-radius: 10px;
flex-direction: column;
justify-content: center;
width: 100%;
}
.Nivel_P__Label {
background: var(--boxbg);
border-radius: 10px 10px 0 0;
padding-block: 0.3rem;
width: 100%;
}
.Nivel_P__Input {
background: none;
border: none;
padding-block: 0.3rem;
width: 100%;
}
.Column__Triple {
display: flex;
flex-direction: column;
width: 29.5%;
}
.Column__Double {
display: flex;
flex-direction: column;
width: 50%;
}
.Personagem__Box {
align-items: center;
display: flex;
border: solid thin var(--boxborder);
border-radius: 10px;
flex-direction: column;
justify-content: center;
width: 100%;
}
.Personagem__Label {
background: var(--boxbg);
border-radius: 10px 10px 0 0;
padding-block: 0.3rem;
width: 100%;
}
.Personagem__Input {
background: none;
border: none;
padding-block: 0.3rem;
width: 100%;
}
.Informacao__Wrap {
align-items: center;
display: flex;
border: solid thin var(--boxborder);
border-radius: 10px;
justify-content: center;
width: 100%;
}
.Informacao__Box {
display: flex;
flex-direction: column;
width: 100%;
}
.Informacao__Label {
background: var(--boxbg);
padding-block: 0.3rem;
width: 100%;
}
.Informacao__Input {
background: none;
border: none;
padding-block: 0.3rem;
}
.Left__Label {
border-radius: 10px 0 0 0;
}
.Right__Label {
border-radius: 0 10px 0 0;
}
.Middle__Input {
border-left: solid thin var(--boxborder);
border-right: solid thin var(--boxborder)
}
.Jogador__Wrap {
align-items: center;
display: flex;
justify-content: center;
width: 100%;
}
.Jogador__Box {
display: flex;
border: solid thin var(--boxborder);
border-radius: 10px;
flex-direction: column;
width: 100%;
}
.Jogador__Label {
background: var(--boxbg);
border-radius: 10px 10px 0 0;
padding-block: 0.3rem;
width: 100%;
}
.Jogador__Input {
background: none;
border: none;
padding-block: 0.3rem;
width: 100%;
}
.Logo__3DX {
align-items: center;
background: var(--boxbg);
border-radius: 10px;
font-weight: bold;
color: var(--fonttitle);
display: flex;
height: 100%;
justify-content: center;
margin-left: 6%;
width: 4.5rem;
}
.Description {
display: flex;
justify-content: space-between;
margin-bottom: 1.5rem;
padding-inline: 2%;
width: 96%;
}
.Column__Double:first-child {
padding-right: 1.5rem;
}
.DescriptionL__Box {
align-items: center;
display: flex;
border: solid thin var(--boxborder);
border-bottom: none;
flex-direction: column;
justify-content: flex-start;
width: 100%;
}
.DescriptionL__Label {
background: var(--boxbg);
padding-block: 0.3rem;
width: 100%;
}
.DescriptionL__Textarea {
background: none;
border: none;
padding-block: 0.3rem;
text-align: start;
width: 100%;
}
.DescriptionR__Box {
align-items: center;
display: flex;
border: solid thin var(--boxborder);
border-bottom: none;
flex-direction: column;
justify-content: flex-start;
width: calc(100% - 2px);
}
.DescriptionR__Label {
background: var(--boxbg);
padding-block: 0.3rem;
width: 100%;
}
.DescriptionR__Textarea {
background: none;
border: none;
padding-block: 0.3rem;
text-align: start;
width: 100%;
}
.First__Box {
border-radius: 10px 10px 0 0;
}
.Last__Box {
border-bottom: solid thin var(--boxborder);
border-radius: 0 0 10px 10px;
}
.Origem__Wrap {
display: flex;
}
.Origem__Box {
align-items: center;
display: flex;
border: solid thin var(--boxborder);
border-bottom: none;
flex-direction: column;
justify-content: flex-start;
width: 100%;
}
.Origem__Label {
background: var(--boxbg);
padding-block: 0.3rem;
width: 100%;
}
.Origem__Textarea {
background: none;
border: none;
padding-block: 0.3rem;
text-align: start;
width: 100%;
}
.Origem__Box--Left {
border-radius: 10px 0 0 0;
border-right: none;
}
.Origem__Box--Right {
border-radius: 0 10px 0 0;
border-left: none;
}
.Origem__Textarea--Left {
border-right: solid thin var(--boxborder);
}
.Origem__Textarea--Right {
width: calc(100% - 12px);
}
.Resize {
height: 100%;
}
.Gameplay {
display: flex;
padding-inline: 2%;
width: 96%;
}
.Gameplay__Wrap {
display: flex;
flex-direction: column;
width: 75%
}
.GameplayUpper__Wrap {
display: flex;
justify-content: space-between;
padding-right: 2.5%;
}
.GameplayUpper__Wrap--Left {
display: flex;
border-top: solid thin var(--boxborder);
border-radius: 10px;
flex-direction: column;
width: 42%;
}
.Status__Wrap {
border-left: solid thin var(--boxborder);
border-right: solid thin var(--boxborder);
border-radius: 10px 10px 0 0;
display: flex;
}
.Status__Box {
display: flex;
flex-direction: column;
width: 50%;
}
.Status__Label {
background: var(--boxbg);
padding-block: 0.3rem;
}
.StatusDesc__Wrap {
display: flex;
border-right: solid thin var(--boxborder);
width: 100%;
}
.Status__Description {
align-items: center;
color: var(--fontsub);
display: flex;
font-size: 0.7rem;
justify-content: center;
padding-block: 0.5rem;
}
.Status__Input {
background: none;
border: none;
font-size: 14px;
padding-block: 0.5rem;
}
.Status__Box--Left {
border-right: solid thin var(--boxborder);
}
.RD__Resize--Width {
width: 20%;
}
.Complicacoes__Box {
align-items: center;
display: flex;
border: solid thin var(--boxborder);
border-radius: 0 0 10px 10px;
flex-direction: column;
justify-content: center;
width: calc(100% - 2px);
}
.Complicacoes__Label {
background: var(--boxbg);
padding-block: 0.3rem;
width: 100%;
}
.Complicacoes__Textarea {
background: none;
border: none;
padding-block: 0.3rem;
text-align: start;
width: calc(100% - 4px);
}
.Armas__Wrap {
display: flex;
border: solid thin var(--boxborder);
border-radius: 10px;;
flex-direction: column;
width: 55%;
}
.Armas__Label {
background: var(--boxbg);
border-radius: 10px 10px 0 0;
padding-block: 0.3rem;
width: 100%;
}
.Armas__Section {
display: flex;
justify-content: space-between;
height: 100%;
margin-bottom: 0.5rem;
padding-inline: 1rem;
width: calc(100% - 2rem);
}
.Armas__Coluna {
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
}
.ArmasBotao {
width: 2%;
}
.ArmasNome {
width: 54%;
}
.ArmasDano {
width: 20%;
}
.ArmasQuant {
width: 15%;
}
.Armas__Description {
align-items: center;
color: var(--fontsub);
display: flex;
font-size: 0.7rem;
justify-content: center;
padding-block: 0.5rem;
}
.Armas__Button:first-child {
margin-top: 1.7rem;
}
.Armas__Input {
background: none;
border: none;
border-bottom: solid thin var(--boxborder);
display: flex;
padding-block: 0.3rem;
width: calc(100% - 1px);
}
.Armas__Button {
align-content: center;
border: none;
display: flex;
justify-content: center;
padding-bottom: 0.2rem;
height: 100%;
width: 1rem;
}
.GameplayLower__Wrap {
display: flex;
height: 100%;
margin-top: 1.5rem;
}
.Proficiencias__Box {
align-items: center;
border: solid thin var(--boxborder);
border-radius: 10px;
display: flex;
flex-direction: column;
width: 65%;
}
.Proficiencias__Title {
background: var(--boxbg);
border-radius: 10px 10px 0 0;
padding-block: 0.3rem;
width: 100%;
}
.ProficienciasColumns__Wrap {
display: flex;
height: 95%;
width: 95%;
}
.Proficiencias__Wrap {
display: flex;
width: 50%;
margin-bottom: 0.6rem
}
.Proficiencias__Column {
align-items: center;
display: flex;
flex-direction: column;
margin-right: 0.5rem;
width: 100%;
}
.Proficiencias__Column--Right {
margin-right: 0.4rem;
}
.Proficiencias__Label {
align-items: center;
color: var(--fontsub);
display: flex;
font-size: 0.7rem;
justify-content: center;
padding-block: 0.7rem;
width: 100%;
}
.ProficienciasBotao {
width: 5%;
}
.ProficienciasNivel {
width: 20%;
}
.ProficienciasNome {
width: 75%;
}
.Proficiencias__Input {
background: none;
border: none;
border-bottom: solid thin var(--boxborder);
display: flex;
width: calc(100% - 1px);
}
.Proficiencias__Button {
align-content: center;
border: none;
display: flex;
justify-content: center;
padding-bottom: 0.2rem;
height: 100%;
width: 1rem;
}
.Proficiencias_Pontos_Totais {
align-items: center;
display: flex;
}
.Inventory__Wrap {
align-items: center;
display: flex;
flex-direction: column;
padding-inline: 2.5%;
width: 35%;
}
.Inventory__Box {
align-items: center;
border: solid thin var(--boxborder);
border-bottom: none;
display: flex;
flex-direction: column;
height: 100%;
padding-bottom: 0.1rem;
width: 100%;
}
.Inventory__Label {
background: var(--boxbg);
border-radius: 10px 10px 0 0;
padding-block: 0.3rem;
width: 100%;
}
.Inventory__Textarea {
background: none;
border: none;
padding-bottom: 0.2rem;
padding-top: 0.3rem;
text-align: start;
width: 100%;
}
.Square__Label {
border-radius: 0;
}
.Bottom__Line {
border-bottom: solid thin var(--boxborder);
}
.Resource__Wrap {
display: flex;
justify-content: center;
margin-bottom: 0.5rem;
width: 90%;
}
.Resource__Column {
align-items: center;
display: flex;
flex-direction: column;
}
.Resource__Label {
align-items: center;
color: var(--fontsub);
display: flex;
font-size: 0.7rem;
justify-content: center;
padding-block: 0.7rem;
width: 100%;
}
.Resource__Input {
background: none;
border: none;
border-bottom: solid thin var(--boxborder);
display: flex;
padding-block: 0.3rem;
width: calc(100% - 1px);
}
#resizeresourceinput {
height: auto !important;
}
.Resource__Button {
align-content: center;
border: none;
display: flex;
justify-content: center;
padding-bottom: 0.2rem;
height: 100%;
width: 1rem;
}
.ResourceButton {
width: 5%;
}
.ResourceNome {
margin-inline: 0.4rem;
width: 65%;
}
.ResourceQuant {
width: 30%;
}
.Quant__Column {
display: flex;
justify-content: space-between;
width: 90%;
}
.QuantInner__Column {
width: 45%;
}
.Habilidades__Section {
display: flex;
flex-direction: column;
width: 25%;
}
.Habilidades__Box {
align-items: center;
display: flex;
border: solid thin var(--boxborder);
border-radius: 10px 10px 0px 0px;
flex-direction: column;
justify-content: flex-start;
width: 100%
}
.Habilidades__Label {
background: var(--boxbg);
border-radius: 10px 10px 0px 0px;
padding-block: 0.3rem;
width: 100%;
}
.Habilidades__Input {
background: none;
border: none;
padding-block: 0.3rem;
width: 100%;
}
.Beneficios__Box {
align-items: center;
display: flex;
border: solid thin var(--boxborder);
border-radius: 0px 0px 10px 10px;
flex-direction: column;
height: 100%;
justify-content: flex-start;
width: 100%
}
.Beneficios__Label {
background: var(--boxbg);
padding-block: 0.3rem;
width: 100%;
}
.Beneficios__Input {
background: none;
border: none;
padding-block: 0.3rem;
width: 100%;
}
.LeftAlign {
text-align: left;
}
.NoPaddingBottom {
padding-bottom: 0px;
}
#suminput {
background-color: transparent;
border: none;
padding-bottom: 0.4rem;
padding-left: 0.3rem;
text-align: left;
}
.Rolagens__Wrap {
align-items: center;
display: flex;
justify-content: center;
padding-inline: 2%;
padding-block: 1rem;
width: 96%;
margin-bottom: 1rem;
}
.Rolagens__Box {
align-items: center;
display: flex;
justify-content: center;
margin-block: 0rem;
margin-right: 2rem;
}
.Rolagens__Button {
margin-right: 0.5rem;
}
.Rolagens__Label {
font-size: 1.5rem;
}
.sheet-rolltemplate-3dxdano {
padding-top: 1.5rem;
}
.sheet-rolltemplate-3dxdano div.sheet-roll-container {
align-items: center;
background: #101010;
border: solid thin #484848;
border-radius: 10px;
display: flex;
flex-direction: column;
width: 100%;
}
.sheet-rolltemplate-3dxdano div.sheet-roll-container span.sheet-roll-dano {
background: #303030;
border-radius: 10px 10px 0 0;
color: #D3D3D3;
font-family: Arial;
font-size: 1.2rem;
line-height: 100%;
padding-bottom: 0.6rem;
padding-top: 0.8rem;
text-align: center;
width: 100%;
}
.sheet-rolltemplate-3dxdano div.sheet-roll-container div.sheet-roll-wrap {
align-items: center;
display: flex;
justify-content: center;
margin-block: 1.6rem;
}
.sheet-rolltemplate-3dxdano div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-actionname {
color: #D3D3D3;
font-family: Arial;
font-size: 1.3rem;
margin-right: 1rem;
}
.sheet-rolltemplate-3dxdano div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-macroresult span {
background-color: #303030;
border: solid thin #404040;
border-radius: 6px;
color: #D3D3D3;
font-family: Arial;
font-size: 1.6rem;
font-weight: normal;
padding: 0.5rem;
}
.sheet-rolltemplate-3dxproficiencia {
padding-top: 1.5rem;
}
.sheet-rolltemplate-3dxproficiencia div.sheet-roll-container {
align-items: center;
background: #101010;
border: solid thin #484848;
border-radius: 10px;
display: flex;
flex-direction: column;
width: 100%;
}
.sheet-rolltemplate-3dxproficiencia div.sheet-roll-container span.sheet-roll-proficiencia {
background: #282828;
border-radius: 10px 10px 0 0;
color: #D3D3D3;
font-family: Arial;
font-size: 1.2rem;
line-height: 100%;
padding-bottom: 0.6rem;
padding-top: 0.8rem;
text-align: center;
width: 100%;
}
.sheet-rolltemplate-3dxproficiencia div.sheet-roll-container div.sheet-roll-wrap {
align-items: center;
display: flex;
justify-content: center;
margin-block: 1.6rem;
}
.sheet-rolltemplate-3dxproficiencia div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-actionname {
color: #D3D3D3;
font-family: Arial;
font-size: 1.3rem;
margin-right: 1rem;
}
.sheet-rolltemplate-3dxproficiencia div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-macroresult span {
background-color: #282828;
border: solid thin #404040;
border-radius: 6px;
color: #D3D3D3;
font-family: Arial;
font-size: 1.6rem;
font-weight: normal;
padding: 0.5rem;
}
.sheet-rolltemplate-3dxrecurso {
padding-top: 1.5rem;
}
.sheet-rolltemplate-3dxrecurso div.sheet-roll-container {
align-items: center;
background: #101010;
border: solid thin #484848;
border-radius: 10px;
display: flex;
flex-direction: column;
width: 100%;
}
.sheet-rolltemplate-3dxrecurso div.sheet-roll-container span.sheet-roll-recurso {
background: #282828;
border-radius: 10px 10px 0 0;
color: #D3D3D3;
font-family: Arial;
font-size: 1.2rem;
line-height: 100%;
padding-bottom: 0.6rem;
padding-top: 0.8rem;
text-align: center;
width: 100%;
}
.sheet-rolltemplate-3dxrecurso div.sheet-roll-container div.sheet-roll-wrap {
align-items: center;
display: flex;
justify-content: center;
margin-block: 1.6rem;
}
.sheet-rolltemplate-3dxrecurso div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-actionname {
color: #D3D3D3;
font-family: Arial;
font-size: 1.3rem;
margin-right: 1rem;
}
.sheet-rolltemplate-3dxrecurso div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-macroresult span {
background-color: #282828;
border: solid thin #404040;
border-radius: 6px;
color: #D3D3D3;
font-family: Arial;
font-size: 1.6rem;
font-weight: normal;
padding: 0.5rem;
}
.sheet-rolltemplate-3dxiniciativa {
padding-top: 1.5rem;
}
.sheet-rolltemplate-3dxiniciativa div.sheet-roll-container {
align-items: center;
background: #101010;
border: solid thin #484848;
border-radius: 10px;
display: flex;
flex-direction: column;
width: 100%;
}
.sheet-rolltemplate-3dxiniciativa div.sheet-roll-container span.sheet-roll-iniciativa {
background: #282828;
border-radius: 10px 10px 0 0;
color: #D3D3D3;
font-family: Arial;
font-size: 1.2rem;
line-height: 100%;
padding-bottom: 0.6rem;
padding-top: 0.8rem;
text-align: center;
width: 100%;
}
.sheet-rolltemplate-3dxiniciativa div.sheet-roll-container div.sheet-roll-wrap {
align-items: center;
display: flex;
justify-content: center;
margin-block: 1.6rem;
}
.sheet-rolltemplate-3dxiniciativa div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-macroresult span {
background-color: #282828;
border: solid thin #404040;
border-radius: 6px;
color: #D3D3D3;
font-family: Arial;
font-size: 1.6rem;
font-weight: normal;
padding: 0.5rem;
}
.sheet-rolltemplate-3dxgenerico {
padding-top: 1.5rem;
}
.sheet-rolltemplate-3dxgenerico div.sheet-roll-container {
align-items: center;
background: #101010;
border: solid thin #484848;
border-radius: 10px;
display: flex;
flex-direction: column;
width: 100%;
}
.sheet-rolltemplate-3dxgenerico div.sheet-roll-container span.sheet-roll-generico {
background: #282828;
border-radius: 10px 10px 0 0;
color: #D3D3D3;
font-family: Arial;
font-size: 1.2rem;
line-height: 100%;
padding-bottom: 0.6rem;
padding-top: 0.8rem;
text-align: center;
width: 100%;
}
.sheet-rolltemplate-3dxgenerico div.sheet-roll-container div.sheet-roll-wrap {
align-items: center;
display: flex;
justify-content: center;
margin-block: 1.6rem;
}
.sheet-rolltemplate-3dxgenerico div.sheet-roll-container div.sheet-roll-wrap span.sheet-roll-macroresult span {
background-color: #282828;
border: solid thin #404040;
border-radius: 6px;
color: #D3D3D3;
font-family: Arial;
font-size: 1.6rem;
font-weight: normal;
padding: 0.5rem;
}