Files
roll20-character-sheets/Tetra/Tetra.css
T
2020-12-11 19:56:06 +01:00

1096 lines
21 KiB
CSS

@import url('https://fonts.googleapis.com/css?family=Eagle+Lake|Open+Sans&display=swap');
.charsheet
{
--sombre: RGB(75,74,76);
--rouge: RGB(255,18,000);
--bleu: RGB(004,051,253);
--vert: RGB(000,150,025);
--violet: RGB(201,000,251);
--block:radial-gradient(closest-side,rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.3)), url('https://raw.githubusercontent.com/Zakarik/roll20-character-sheets/Tetra/Tetra/img/parchemin.png');
min-width:700px;
}
.itemcontrol
{
z-index:2;
}
.btn
{
border-radius:0px;
}
img,
div,
span,
input[type="number"],
input[type="text"],
textarea,
select,
h1,
h2,
label,
button[type="roll"],
button[type="action"],
b
{
display:flex;
}
input[type="number"],
input[type="text"],
textarea,
select
{
color:black;
}
label
{
padding:0px;
margin:0px;
font-weight:normal;
}
select,
input[type="text"],
input[type="number"]
{
padding:0px;
margin:0px;
border-radius:0px;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
{
-webkit-appearance: none;
margin: 0;
}
input[type=number],
input[type=text]
{
-moz-appearance:textfield;
border-radius:0px;
}
textarea
{
border:none;
width:100%;
padding:0px;
text-align:justify;
border-radius:0px;
margin:0px;
}
.repcontrol
{
display:flex;
width:100%;
justify-content:space-between;
flex-direction:row-reverse;
}
.repcontrol > .btn
{
padding-bottom:0px;
border-radius:0px;
border:1px solid var(--sombre);
padding-top:0px;
}
.itemcontrol > .btn
{
padding-top:3px;
padding-bottom:2px;
}
div.sheet-autoex
{
line-height: 1.4em;
min-height: 1.4em;
cursor: text;
text-align: left;
position:relative;
width:100%;
}
div.sheet-autoex > span
{
visibility: hidden;
display: block;
font-family: inherit;
font-size: inherit;
line-height: inherit;
white-space: pre-wrap;
text-align: inherit;
min-height: inherit;
height:100%;
word-wrap:anywhere;
padding-left:2px;
padding-right:2px;
}
div.sheet-autoex > textarea
{
display: block;
z-index: 1;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: calc(100% - 4px);;
overflow: hidden;
font-family: inherit;
font-size: inherit;
line-height: inherit;
white-space: pre-wrap;
text-align: inherit;
min-height: inherit;
resize: none;
margin:0px;
padding-left:2px;
padding-right:0px;
}
div.sheet-autoex > textarea::placeholder
{
font-family:"Contrail One";
color: #575957da;
text-transform: capitalize;
font-style: italic;
text-align: center;
font-size: 95%;
font-weight:normal;
}
div.sheet-autoex22
{
min-height:22px;
}
div.sheet-autoex24
{
min-height:24px;
}
div.sheet-autoex26
{
min-height:26px;
}
div.sheet-autoex28
{
min-height:28px;
}
div.sheet-autoex40
{
min-height:40px;
}
div.sheet-autoex100
{
min-height:100px;
}
img.sheet-logo
{
width:200px;
}
div.sheet-options
{
position: absolute;
width: calc(100% - 60px);
min-width: 700px;
margin-top: -25px;
}
div.sheet-options > label
{
font-size: 25px;
font-family: pictos;
margin: 0px;
padding: 0px;
color: RGB(243, 224, 197);
display: flex;
width: 24px;
line-height: 20px;
height: 23px;
margin-left: auto;
}
div.sheet-options > label > input[type="checkbox"]
{
opacity: 0;
z-index: 1;
position: absolute;
width: 24px;
height: 23px;
}
div.sheet-options > label > span
{
width:100%;
font-size: 25px;
font-family: pictos;
color: RGB(243, 224, 197);
line-height: 20px;
opacity: .5;
text-shadow: 1px 1px 5px black;
}
div.sheet-options > label > input[type="checkbox"]:checked ~ span
{
opacity:1;
text-shadow:1px 1px 1px black;
}
div.sheet-options > div
{
display:none;
}
div.sheet-options > input[type="hidden"][value="1"] ~ div
{
position: absolute;
display: flex;
width: 200px;
padding: 10px;
background-image: var(--block);
height: auto;
justify-content: space-between;
align-content: flex-start;
align-items: flex-start;
border: 1px solid black;
z-index: 200;
border-radius: 30px;
margin-left: calc(100% - 235px);
margin-top: 10px;
}
div.sheet-options > div > select
{
width:100%;
text-align:center;
border:0px;
padding:0px;
background:transparent;
border-bottom:1px dashed black;
padding-top:7px;
}
label.sheet-blason
{
width:75px;
height:75px;
}
label.sheet-blason > input[type="radio"]
{
display:none;
position:absolute;
width:75px;
height:75px;
opacity:0;
}
label.sheet-blason > img
{
display:none;
width:75px;
height:75px;
}
label.sheet-blason > input[type="hidden"][value="1"] ~ img:nth-of-type(1),
label.sheet-blason > input[type="hidden"][value="1"] ~ input[type="radio"]:nth-of-type(3),
label.sheet-blason > input[type="hidden"][value="2"] ~ img:nth-of-type(2),
label.sheet-blason > input[type="hidden"][value="2"] ~ input[type="radio"]:nth-of-type(4),
label.sheet-blason > input[type="hidden"][value="3"] ~ img:nth-of-type(3),
label.sheet-blason > input[type="hidden"][value="3"] ~ input[type="radio"]:nth-of-type(5),
label.sheet-blason > input[type="hidden"][value="4"] ~ img:nth-of-type(4),
label.sheet-blason > input[type="hidden"][value="4"] ~ input[type="radio"]:nth-of-type(6),
label.sheet-blason > input[type="hidden"][value="5"] ~ img:nth-of-type(5),
label.sheet-blason > input[type="hidden"][value="5"] ~ input[type="radio"]:nth-of-type(7),
label.sheet-blason > input[type="hidden"][value="6"] ~ img:nth-of-type(6),
label.sheet-blason > input[type="hidden"][value="6"] ~ input[type="radio"]:nth-of-type(2),
{
display:flex;
}
div.sheet-header
{
width:100%;
justify-content:space-between;
align-items:flex-start;
margin-bottom:30px;
}
div.sheet-identite
{
width: calc(100% - 200px - 65px - 100px);
flex-wrap: wrap;
background-image: var(--block);
padding: 10px;
border: 0.5px var(--sombre);
box-shadow: 2px 2px 12px var(--sombre);
margin-right:50px;
}
div.sheet-identite > label
{
width:100%;
justify-content:space-between;
align-items:flex-end;
}
div.sheet-identite > label > span
{
color:var(--sombre);
font-family:"Eagle Lake";
margin-right:10px;
white-space:nowrap;
}
div.sheet-identite > label > input[type="text"]
{
width:100%;
min-width:0px;
padding:0px;
border:0px;
border-bottom:1px dashed black;
padding-top:7px;
font-family:"Open Sans";
background:transparent;
}
div.sheet-container
{
width:calc(100% - 55px);
flex-wrap:wrap;
justify-content:space-between;
margin-left:auto;
margin-right:auto;
}
div.sheet-cHeader
{
width:100%;
flex-wrap:wrap;
justify-content:space-evenly;
}
div.sheet-stats,
div.sheet-dStats
{
width: 470px;
justify-content: space-between;
background-image: var(--block);
box-shadow: 2px 2px 12px var(--sombre);
padding-left:10px;
padding-right:5px;
padding-top:10px;
padding-bottom:10px;
margin-bottom:60px;
margin-left:10px;
margin-right:10px;
}
div.sheet-stats > div,
div.sheet-dStats > div
{
width:100px;
flex-wrap:wrap;
}
div.sheet-stats > div > button[type="roll"],
div.sheet-dStats > div > button[type="roll"]
{
border: 0px;
background: transparent;
padding: 0px;
margin: 0px;
box-shadow: none;
text-shadow: none;
z-index: 199;
margin-bottom:15px;
}
div.sheet-stats > div > button[type="roll"]:hover::before,
div.sheet-dStats > div > button[type="roll"]:hover::before
{
text-transform:uppercase;
}
div.sheet-stats > div > input[type="hidden"][value="1"] ~ button[type="roll"]::before,
div.sheet-dStats > div > input[type="hidden"][value="1"] ~ button[type="roll"]::before
{
font-family:"dicefontd4";
content:"p";
}
div.sheet-stats > div > input[type="hidden"][value="2"] ~ button[type="roll"]::before,
div.sheet-dStats > div > input[type="hidden"][value="2"] ~ button[type="roll"]::before
{
font-family:"dicefontd6";
content:"f";
}
div.sheet-stats > div > input[type="hidden"][value="3"] ~ button[type="roll"]::before,
div.sheet-dStats > div > input[type="hidden"][value="3"] ~ button[type="roll"]::before
{
font-family:"dicefontd8";
content:"h";
}
div.sheet-stats > div > input[type="hidden"][value="4"] ~ button[type="roll"]::before,
div.sheet-dStats > div > input[type="hidden"][value="4"] ~ button[type="roll"]::before
{
font-family:"dicefontd10";
content:"j";
}
div.sheet-stats > div > input[type="hidden"][value="5"] ~ button[type="roll"]::before,
div.sheet-dStats > div > input[type="hidden"][value="5"] ~ button[type="roll"]::before
{
font-family:"dicefontd12";
content:"l";
}
div.sheet-stats > div > input[type="hidden"][value="6"] ~ button[type="roll"]::before,
div.sheet-dStats > div > input[type="hidden"][value="6"] ~ button[type="roll"]::before
{
font-family:"dicefontd20";
content:"t";
}
div.sheet-stats > div > button[type="roll"] > span,
div.sheet-dStats > div > button[type="roll"] > span
{
width: 100%;
font-family: "Eagle Lake";
text-shadow: 1px 1px 1px black;
justify-content: right;
font-size:20px;
padding-right:10px;
}
div.sheet-dStats > div > button[type="roll"]
{
margin-top:5px;
}
div.sheet-dStats > div > span
{
width: 100%;
font-family: "Eagle Lake";
text-shadow: 1px 1px 1px black;
justify-content: right;
font-size:20px;
padding-right:25px;
margin-bottom:15px;
}
div.sheet-stats > div:nth-of-type(1) > button[type="roll"] > span,
div.sheet-dStats > div:nth-of-type(1) > span
{
color: var(--rouge);
}
div.sheet-stats > div:nth-of-type(2) > button[type="roll"] > span,
div.sheet-dStats > div:nth-of-type(2) > span
{
color: var(--bleu);
padding-right:15px;
}
div.sheet-stats > div:nth-of-type(3) > button[type="roll"],
div.sheet-dStats > div:nth-of-type(3) > button[type="roll"]
{
margin-left:-15px;
}
div.sheet-stats > div:nth-of-type(3) > button[type="roll"] > span,
div.sheet-dStats > div:nth-of-type(3) > button[type="roll"] > span
{
color: var(--vert);
}
div.sheet-stats > div:nth-of-type(4) > button[type="roll"] > span,
div.sheet-dStats > div:nth-of-type(4) > span
{
color: var(--violet);
}
div.sheet-stats > div > label,
div.sheet-dStats > div > label:first-of-type
{
width: 70px;
flex-wrap: wrap;
z-index: 99;
}
div.sheet-stats > div > label
{
cursor:text;
}
div.sheet-stats > div > label > img
{
position:absolute;
width: 70px;
margin-top: -30px;
margin-left: -25px;
filter: drop-shadow(1px 1px 4px);
}
div.sheet-dStats > div > label:first-of-type > img
{
position:absolute;
width: 90px;
margin-top: -30px;
margin-left: -47px;
filter: drop-shadow(1px 1px 4px);
cursor:auto;
}
div.sheet-stats > div > label > input[type="number"],
div.sheet-dStats > div > label:first-of-type > input[type="number"]
{
width: 70px;
height: 70px;
border-radius: 50%;
border-color: black;
margin-right: auto;
text-align: center;
font-family: "Eagle Lake";
font-size: 45px;
color: var(--sombre);
padding-top: 5px;
box-shadow: inset -3px -2px 6px;
}
div.sheet-stats > div > input[type="text"]
{
width: 70px;
height: 70px;
border-radius: 50%;
border-color: black;
position: absolute;
margin-top: 95px;
margin-left: 15px;
font-family: "Eagle Lake";
font-size: 25px;
color: var(--sombre);
padding-top: 20px;
box-shadow: inset -3px -2px 6px;
text-align: center;
}
div.sheet-dStats > div > label:last-of-type
{
width: 70px;
height: 70px;
position: absolute;
margin-top: 95px;
margin-left: 15px;
cursor:auto;
}
div.sheet-dStats > div > label:last-of-type > img
{
position: absolute;
margin-left: -43px;
margin-top: 10px;
width: 80px;
max-width: none;
}
div.sheet-dStats > div > label:last-of-type > input[type="number"]
{
width: 70px;
height: 70px;
border-radius: 50%;
border-color: black;
font-family: "Eagle Lake";
font-size: 40px;
color: var(--sombre);
padding-top: 5px;
box-shadow: inset -3px -2px 6px;
text-align: center;
}
div.sheet-cTop,
div.sheet-cBottom
{
width:100%;
justify-content:space-between;
align-items:flex-start;
align-content:flex-start;
}
div.sheet-equipement,
div.sheet-details,
div.sheet-cBottom > .repcontainer > .repitem
{
width:calc((100% / 2) - 40px);
flex-wrap:wrap;
margin-top:10px;
background-image:var(--block);
padding:10px;
box-shadow: 2px 2px 12px var(--sombre);
align-items:flex-start;
align-content:flex-start;
}
div.sheet-equipement
{
justify-content:space-evenly;
}
div.sheet-equipement > h1
{
font-family: "Eagle Lake";
width:100%;
font-size:20px;
}
div.sheet-equipement > label
{
width:148px;
height:23px;
margin-bottom:5px;
background:transparent;
}
div.sheet-equipement > label > input[type="checkbox"]
{
position:absolute;
width:150px;
height:25px;
opacity:0;
}
div.sheet-equipement > label > span
{
width:100%;
}
div.sheet-equipement > label > span::before
{
display:flex;
content:attr(title);
width:100%;
height:25px;
line-height:20px;
font-size:11px;
font-weight:bold;
justify-content:center;
align-items:center;
font-variant:small-caps;
box-shadow:1px 1px 3px black;
border:1px solid black;
}
div.sheet-equipement > label > input[type="checkbox"]:checked ~ span::before
{
box-shadow:inset 1px 1px 3px black;
}
div.sheet-equipement > .repcontainer
{
width:100%;
flex-wrap:wrap;
margin-top:10px;
}
div.sheet-equipement > .repcontainer > .repitem
{
width:100%;
}
div.sheet-equipement > .repcontainer > .repitem:not(:first-of-type)
{
margin-top:10px;
}
div.sheet-equipement .sheet-autoex,
div.sheet-details .sheet-autoex
{
font-family: "Eagle Lake";
border:1px dashed black;
}
div.sheet-equipement .sheet-autoex > textarea,
div.sheet-details .sheet-autoex > textarea,
div.sheet-cBottom .repitem > div.sheet-autoex > textarea
{
background:transparent;
}
div.sheet-details > label,
div.sheet-cBottom .repitem > label
{
width:100%;
justify-content:space-between;
align-items:flex-end;
}
div.sheet-details > label:not(:first-of-type)
{
margin-top:20px;
}
div.sheet-details > label > span
{
width:150px;
font-family: "Eagle Lake";
font-weight:bold;
font-size:16px;
}
div.sheet-details > label > input[type="text"]
{
width:calc(100% - 150px);
font-family: "Eagle Lake";
border:0px;
border-bottom:1px dashed black;
margin:0px;
padding:0px;
padding-top:7px;
background:transparent;
}
div.sheet-details > label > div.sheet-autoex
{
width:calc(100% - 150px);
font-size:13px;
}
div.sheet-cBottom .repitem:nth-of-type(1n+1) > label:first-of-type
{
transform:rotate(24deg);
}
div.sheet-cBottom .repitem:nth-of-type(4) > label:first-of-type
{
transform:rotate(24deg);
}
div.sheet-cBottom .repitem:nth-of-type(6n+4) > label:first-of-type
{
transform:rotate(24deg);
}
div.sheet-cBottom .repitem:nth-of-type(3n+3) > label:first-of-type
{
transform:rotate(-10deg);
}
div.sheet-cBottom .repitem:nth-of-type(4) > label:first-of-type
{
transform:rotate(-10deg);
}
div.sheet-cBottom .repitem:nth-of-type(6n+4) > label:first-of-type
{
transform:rotate(-10deg);
}
div.sheet-cBottom .repitem:nth-of-type(6n+6) > label:first-of-type
{
transform:rotate(-26deg);
}
div.sheet-cBottom .repitem:nth-of-type(6n+5) > label:first-of-type
{
transform:rotate(-26deg);
}
div.sheet-cBottom .repitem > label:first-of-type
{
position: absolute;
width: 82px;
height: 80px;
margin-left: calc(100% - 50px);
margin-top: -45px;
justify-content: center;
align-items: center;
}
div.sheet-cBottom .repitem > label:first-of-type > input[type="radio"]
{
display:none;
position:absolute;
width: 60px;
height: 35px;
opacity: 0;
margin-bottom: 11px;
z-index:199;
}
div.sheet-cBottom .repitem > label:first-of-type > span
{
display:none;
width:100%;
}
div.sheet-cBottom .repitem > label:first-of-type > span::before
{
content: "";
width: 30px;
height: 30px;
border: 1px solid black;
border-radius: 50%;
background-image: radial-gradient(white 30%, black);
margin-top: -10px;
margin-left: 23px;
}
div.sheet-cBottom .repitem > label:first-of-type > input[type="hidden"][value="1"] ~ input[type="radio"]:nth-of-type(3),
div.sheet-cBottom .repitem > label:first-of-type > input[type="hidden"][value="1"] ~ span,
div.sheet-cBottom .repitem > label:first-of-type > input[type="hidden"][value="2"] ~ input[type="radio"]:nth-of-type(4),
div.sheet-cBottom .repitem > label:first-of-type > input[type="hidden"][value="2"] ~ img:nth-of-type(1),
div.sheet-cBottom .repitem > label:first-of-type > input[type="hidden"][value="3"] ~ input[type="radio"]:nth-of-type(5),
div.sheet-cBottom .repitem > label:first-of-type > input[type="hidden"][value="3"] ~ img:nth-of-type(2),
div.sheet-cBottom .repitem > label:first-of-type > input[type="hidden"][value="4"] ~ input[type="radio"]:nth-of-type(6),
div.sheet-cBottom .repitem > label:first-of-type > input[type="hidden"][value="4"] ~ img:nth-of-type(3),
div.sheet-cBottom .repitem > label:first-of-type > input[type="hidden"][value="5"] ~ input[type="radio"]:nth-of-type(7),
div.sheet-cBottom .repitem > label:first-of-type > input[type="hidden"][value="5"] ~ img:nth-of-type(4),
div.sheet-cBottom .repitem > label:first-of-type > input[type="hidden"][value="6"] ~ input[type="radio"]:nth-of-type(8),
div.sheet-cBottom .repitem > label:first-of-type > input[type="hidden"][value="6"] ~ img:nth-of-type(5),
div.sheet-cBottom .repitem > label:first-of-type > input[type="hidden"][value="7"] ~ input[type="radio"]:nth-of-type(2),
div.sheet-cBottom .repitem > label:first-of-type > input[type="hidden"][value="7"] ~ img:nth-of-type(6)
{
display:flex;
}
div.sheet-cBottom .repitem > label:first-of-type > img
{
display:none;
width:100%;
height:80px;
}
div.sheet-cBottom .repitem > label:last-of-type > span
{
width:85px;
font-family: "Eagle Lake";
font-weight:bold;
font-size:16px;
}
div.sheet-cBottom .repitem > label:last-of-type > input[type="text"]
{
width:calc(100% - 85px);
font-family: "Eagle Lake";
border:0px;
border-bottom:1px dashed black;
margin:0px;
padding:0px;
padding-top:7px;
background:transparent;
z-index:99;
}
div.sheet-cBottom .repitem > div.sheet-autoex
{
width:100%;
border:1px dashed black;
margin-top:5px;
}
div.sheet-cBottom
{
flex-wrap:wrap;
margin-top:30px;
margin-bottom:30px;
}
div.sheet-cBottom > .repcontainer
{
width:100%;
flex-wrap:wrap;
justify-content:space-between;
}
div.sheet-cBottom > .repcontainer > .repitem > .itemcontrol
{
margin-left:-10px;
margin-top:-10px;
}
div.sheet-cBottom > .editmode > .repitem
{
width:100%;
}
div.sheet-cBottom > .editmode > .repitem:nth-of-type(2),
div.sheet-cBottom > .repcontainer > .repitem:nth-of-type(n+3)
{
margin-top:30px;
}
div.sheet-cBottom .repcontrol > button.btn
{
margin-top:5px;
}
div.sheet-cBottom .repcontrol > button.btn
{
padding:0px;
width:160px;
text-align:left;
height:21px;
}
div.sheet-cBottom .repcontrol > button.btn:hover::before
{
box-shadow:inset 1px 1px 3px black;
}
div.sheet-cBottom .repcontrol > button.btn:last-of-type::before
{
content:"Ajouter un pouvoir";
position:absolute;
width:160px;
background-image:var(--block);
line-height:20px;
height:20px;
font-weight:bold;
font-family:"Eagle Lake";
text-align:center;
margin-top:-1px;
}
div.sheet-cBottom .repcontrol > button.btn:first-of-type::before
{
content:"Modifier un pouvoir";
position:absolute;
width:160px;
background-image:var(--block);
line-height:20px;
height:20px;
font-weight:bold;
font-family:"Eagle Lake";
text-align:center;
margin-top:-1px;
}
.sheet-rolltemplate-base
{
display:flex;
width:calc(100% - 10px);
border:1px solid black;
padding-top:5px;
padding-bottom:5px;
flex-wrap:wrap;
background-image:radial-gradient(closest-side,rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.3)), url('https://raw.githubusercontent.com/Zakarik/roll20-character-sheets/Tetra/Tetra/img/parchemin.png');
border-radius:15px;
}
.sheet-rolltemplate-base .sheet-exploit
{
}
.sheet-rolltemplate-base > h1
{
display:flex;
width: 100%;
font-size: 16px;
line-height: 16px;
font-weight: normal;
justify-content: center;
text-transform: uppercase;
word-wrap:anywhere;
margin-bottom:5px;
padding-left:5px;
padding-right:5px;
}
.sheet-rolltemplate-base > h2
{
display:flex;
width: 100%;
font-size: 12px;
line-height: 12px;
font-weight: normal;
justify-content: center;
word-wrap:anywhere;
margin-bottom:5px;
padding-left:5px;
padding-right:5px;
font-variant:small-caps;
}
.sheet-rolltemplate-base > div
{
display:flex;
width:100%;
justify-content:space-between;
padding-left:5px;
padding-right:5px;
border-top:1px solid black;
padding-top:5px;
}
.sheet-rolltemplate-base > div:not([class*="exploit"]) > span
{
margin-right:20px;
font-weight:bold;
}
.sheet-rolltemplate-base > div.sheet-exploit
{
flex-wrap:wrap;
}
.sheet-rolltemplate-base > div.sheet-exploit > span
{
display:flex;
width:100%;
justify-content:center;
font-variant:small-caps;
color:green;
}
.sheet-rolltemplate-base > div.sheet-exploit > span:first-of-type
{
font-weight:bold;
}
.sheet-rolltemplate-base > div.sheet-exploit > span:last-of-type
{
color:black;
font-size:11px;
text-align:center;
}
.sheet-rolltemplate-base .inlinerollresult
{
text-align: center;
border:0px;
background:none;
}
.sheet-rolltemplate-base .inlinerollresult.fullcrit
{
color:green;
border: 0px;
}
.sheet-rolltemplate-base .inlinerollresult.fullfail
{
color:red;
border: 0px;
}
.sheet-rolltemplate-base .inlinerollresult.importantroll
{
border: 0px;
}