Files
roll20-character-sheets/Devastra/devastra.css
T

1050 lines
18 KiB
CSS

.charsheet
{
background-color:White;
font-family:"Segoe UI", Arial;
color:RGB(55, 53, 53);
}
select
{
margin-bottom: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;
background-color:transparent;
color:inherit;
font:inherit;
}
textarea
{
border:none;
width:100%;
padding:0px;
text-align:justify;
border-radius:0px;
margin:0px;
background-color:transparent;
color:inherit;
font:inherit;
}
label
{
margin:0px;
padding:0px;
}
button.repcontrol_add,
button.repcontrol_edit
{
border-radius:0px;
border-top:0px;
}
.sheet-autoex
{
line-height: 1.4em;
min-height: 1.4em;
cursor: text;
text-align: left;
position:relative;
width:100%;
}
.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;
}
.sheet-autoex > textarea
{
display: block;
z-index: 1;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
font-family: inherit;
font-size: inherit;
line-height: inherit;
white-space: pre-wrap;
text-align: inherit;
min-height: inherit;
resize: none;
}
.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;
}
.sheet-autoex > textarea:hover
{
border-color: transparent;
color: black;
background: white;
outline: none;
box-shadow: 0px 0px 20px rgba(62,63,134, 0.55);
}
div.sheet-top
{
width:100%;
flex-wrap:wrap;
display:flex;
justify-content:space-between;
align-items:flex-start;
}
label.sheet-settings-checkbox
{
font-size: 25px;
font-family: pictos;
margin: 0px;
padding: 0px;
color: RGB(60,64,134);
display: flex;
width: 24px;
line-height: 20px;
height: 23px;
position: absolute;
right: 10px;
}
label.sheet-settings-checkbox input
{
opacity: 0;
z-index: 1;
position: absolute;
width: 24px;
height: 23px;
}
label.sheet-settings-checkbox input + span
{
font-size: 25px;
font-family: pictos;
color: RGB(60,64,134);
line-height: 20px;
opacity: .5;
}
label.sheet-settings-checkbox input:checked ~ span
{
opacity: 1;
}
input.sheet-hider[value="0"] + div
{
display:none;
}
div.sheet-settings
{
position: absolute;
background-color: RGB(130, 136, 201);
right: 29px;
width: 400px;
border: 1px solid black;
z-index: 100;
padding: 5px;
border-radius: 5px;
display: flex;
flex-wrap: wrap;
margin-top: 17px;
}
div.sheet-settings > div
{
min-width: calc(50% - 4px);
flex-grow:1;
align-items:center;
padding:2px;
font-size:10px;
min-height:24px;
line-height:20px;
border-bottom:1px solid rgb(222, 219, 203);
}
div.sheet-settings select
{
width: 80px;
margin: 0 7px 0 0;
padding: 0;
height: 20px;
}
div.sheet-settings input[type="checkbox"]
{
width: 20px;
height: 20px;
}
div.sheet-settings label
{
margin: 0;
padding: 0;
display: flex;
width: auto;
font: inherit;
font-weight:bold;
color:black;
}
div.sheet-blockLeft
{
width:321px;
}
div.sheet-columnLeftT1
{
width:201px;
}
div.sheet-columnRightT1
{
width:calc(100% - 206px);
}
div.sheet-tab3
{
justify-content:space-between;
}
div.sheet-columnLeftT3,
div.sheet-columnRightT3
{
width:calc(50% - 15px);
display: flex;
flex-wrap: wrap;
background-color: rgb(222, 219, 203);
padding: 5px;
border-radius: 5px;
margin-top: 10px;
}
div.sheet-columnLeftT3 > label,
div.sheet-columnRightT3 > label
{
width:100%;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
div.sheet-columnLeftT3 > label > span,
div.sheet-columnRightT3 > label > span
{
width:100px;
display:flex;
align-items:center;
}
div.sheet-columnLeftT3 > label:last-of-type > span
{
width:200px;
}
div.sheet-columnLeftT3 > label > input[type="text"],
div.sheet-columnRightT3 > label > input[type="text"],
div.sheet-columnRightT3 > label > input[type="number"]
{
width:calc(100% - 100px);
display:flex;
border:0px;
border-bottom:1px solid black;
padding-bottom:0px;
font-weight: normal;
font-size: 15px;
padding-right:0px;
padding-left:0px;
}
div.sheet-columnRightT3 > label > input[type="number"]
{
text-align:center;
}
div.sheet-columnRightT3 > label > div
{
width:100%;
}
div.sheet-blockMenu
{
display:flex;
justify-content:space-between;
padding-left: 1px;
padding-bottom: 1px;
flex-wrap: wrap;
align-content: baseline;
width:100%;
padding-top:5px;
}
div.sheet-blockMenu > label
{
margin: 0px;
padding: 0px;
width: 100px;
margin-right:2px;
height: 26px;
margin-bottom:2px;
}
div.sheet-blockMenu > label > input[type="radio"]
{
width: 101px;
height: 26px;
position: absolute;
cursor: pointer;
z-index: 1;
opacity: 0;
}
div.sheet-blockMenu > label > input[type="radio"] ~ span[title]::before
{
content: attr(title);
width: 99px;
text-align: center;
display: inline-block;
height: 24px;
font-size: 16px;
font-weight: bold;
border: 1px solid black;
position: relative;
background: RGB(60,64,134);
color: white;
line-height: 24px;
color: rgb(202, 200, 117);
font-variant: small-caps;
}
div.sheet-blockMenu > label > input[type="radio"]:checked ~ span[title]::before
{
box-shadow: 0px 0px 7px 0px #000000 inset;
}
div.sheet-content
{
width:100%;
flex-wrap:wrap;
justify-content:space-between;
align-items:flex-start;
display:none;
}
input[type="hidden"][value="1"] ~ div.sheet-tab1,
input[type="hidden"][value="2"] ~ div.sheet-tab2,
input[type="hidden"][value="3"] ~ div.sheet-tab3
{
display:flex;
}
div.sheet-blockInfo
{
display:flex;
flex-wrap:wrap;
background-color: rgb(222, 219, 203);
padding:5px;
border-radius:5px;
width:calc(100% - 321px - 15px);
}
div.sheet-blockInfo > label
{
display:flex;
width:100%;
justify-content:space-between;
margin-bottom:5px;
}
div.sheet-blockInfo > label > span
{
display:flex;
width:70px;
align-items:end;
font-variant:small-caps;
}
div.sheet-blockInfo > label > input[type="text"]
{
display:flex;
width:calc(100% - 75px);
border:0px;
border-bottom:1px solid black;
padding-bottom:0px;
font-weight: normal;
font-size: 15px;
padding-right:0px;
padding-left:0px;
}
div.sheet-blockInfo > label > div > textarea
{
font-weight: normal;
font-size: 15px;
}
div.sheet-blockInfo > label:last-of-type
{
flex-wrap:wrap;
margin-bottom:0px;
}
div.sheet-blockInfo > label:last-of-type > span
{
width:100%;
}
div.sheet-blockChakra
{
width: calc(100% - 10px);
display: flex;
flex-wrap: wrap;
background-color: rgb(222, 219, 203);
padding: 5px;
border-radius: 5px;
margin-top: 10px;
}
div.sheet-blockChakra > label
{
width:100%;
display:flex;
justify-content:space-between;
}
div.sheet-blockChakra > label > span
{
width:140px;
display:flex;
align-items:end;
font-variant:small-caps;
}
div.sheet-blockChakra > label > input[type="number"]
{
width:51px;
display:flex;
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-bottom: 1px solid black;
padding-bottom: 0px;
padding-left: 0px;
padding-right:0px;
text-align:center;
}
div.sheet-blockStats
{
width: calc(100% - 10px);
display: flex;
flex-wrap: wrap;
background-color: rgb(222, 219, 203);
padding: 5px;
border-radius: 5px;
margin-top: 10px;
}
div.sheet-blockStats > label
{
width:100%;
display:flex;
justify-content:space-between;
margin-bottom:5px;
}
div.sheet-blockStats > label:last-of-type
{
margin-bottom:0px;
}
div.sheet-blockStats > label > button[type="roll"]
{
width: calc(100% - 60px);
align-self: center;
font-variant: small-caps;
font-size: 20px;
padding: 0px;
border-radius: 0px;
border: 0px;
height: 50px;
margin: 0px;
text-align: left;
padding-left: 5px;
font-weight: bold;
font-family: inherit;
}
div.sheet-blockStats > label > button[type="roll"]::before
{
content:"";
}
div.sheet-blockStats > label > input[type="number"]
{
width:50px;
height:50px;
display:flex;
border-radius:25px;
background-color: white;
text-align: center;
font-size: 30px;
padding-bottom: 6px;
border-style: double;
border-width: 4px;
border-color: lightgray;
}
div.sheet-blockComp
{
display:flex;
flex-wrap:wrap;
background-color: rgb(222, 219, 203);
padding:5px;
border-radius:5px;
width: calc(100% - 10px);
margin-top: 10px;
}
div.sheet-blockComp > h3
{
width:100%;
font-variant:small-caps;
font-size:18px;
text-align:center;
}
div.sheet-blockComp > div.repcontrol
{
width:100%;
}
div.sheet-blockComp > div.repcontainer,
div.sheet-blockComp > div.repcontainer > div.repitem
{
width:100%;
}
div.sheet-blockComp > div.repcontainer > div.repitem > label
{
display:flex;
}
div.sheet-blockComp > div.repcontainer > div.repitem:not(:first-of-type) > label
{
margin-top:5px;
}
div.sheet-blockComp > div.repcontainer > div.repitem > label > span
{
display:flex;
font-weight: bold;
margin-right: 5px;
padding-top: 6px;
width: 7px;
}
div.sheet-blockComp > div.repcontainer > div.repitem > label > input[type="text"]
{
display:flex;
border-top: 0px;
border-right: 0px;
border-left: 0px;
border-bottom: 1px solid black;
padding-bottom: 0px;
padding-left: 0px;
width:calc(100% - 100px - 50px - 10px - 25px - 3px - 7px - 5px);
}
div.sheet-blockComp > div.repcontainer > div.repitem > label > select
{
display:flex;
background-color: transparent;
color: #333;
margin-right: 5px;
margin-left: 5px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom-color: black;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
font-weight: bold;
width: 100px;
}
div.sheet-blockComp > div.repcontainer > div.repitem > label > input[type="number"]
{
display:flex;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom-color: black;
text-align: center;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
width: 50px;
}
div.sheet-blockComp > div.repcontainer > div.repitem > label > button[type="roll"]
{
display:flex;
border-radius: 0px;
padding-top: 4px;
width: 17px;
margin-right:0px;
margin-left:3px;
}
div.sheet-blockOneLine
{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
width:100%;
}
div.sheet-blockDharma
{
display:flex;
flex-wrap:wrap;
background-color: rgb(222, 219, 203);
padding:5px;
border-radius:5px;
width: calc(43% - 5px);
margin-top: 10px;
}
div.sheet-blockDharma > label
{
width:100%;
justify-content:space-between;
display:flex;
}
div.sheet-blockDharma > label > span
{
font-variant:small-caps;
width:101px;
display:flex;
align-items:end;
}
div.sheet-blockDharma > label > input[type="text"]
{
width:calc(100% - 106px);
border:0px;
background-color:transparent;
border-bottom:1px solid black;
border-radius:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
}
div.sheet-blockVitalite
{
display:flex;
flex-wrap:wrap;
background-color: rgb(222, 219, 203);
padding:5px;
border-radius:5px;
width: calc(23% - 5px);
margin-top: 10px;
}
div.sheet-blockVitalite > label
{
width:100%;
justify-content:space-between;
display:flex;
}
div.sheet-blockVitalite > label:first-of-type > span:first-of-type
{
font-variant:small-caps;
width:70px;
display:flex;
align-items:end;
}
div.sheet-blockVitalite > label:first-of-type > span:last-of-type
{
font-variant:small-caps;
width:5px;
display:flex;
align-items:center;
}
div.sheet-blockVitalite > label:first-of-type > input[type="number"]
{
width:calc(50% - 37px);
}
div.sheet-blockVitalite > label > input[type="number"]
{
width:calc(100% - 70px);
border:0px;
background-color:transparent;
border-bottom:1px solid black;
border-radius:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
text-align:center;
}
div.sheet-blockVitalite > label:not(:first-of-type) > span
{
font-size:12px;
align-self:end;
width:70px;
}
div.sheet-blockVitalite > label:not(:first-of-type) > input[type="number"]
{
font-size:12px;
}
div.sheet-blockAtman
{
display:flex;
flex-wrap:wrap;
background-color: rgb(222, 219, 203);
padding:5px;
border-radius:5px;
width: calc(28% - 5px);
margin-top: 10px;
}
div.sheet-blockAtman > label
{
width:100%;
justify-content:space-between;
display:flex;
}
div.sheet-blockAtman > label > span:first-of-type
{
font-variant:small-caps;
width:90px;
display:flex;
align-items:end;
}
div.sheet-blockAtman > label > span:last-of-type
{
font-variant:small-caps;
width:5px;
display:flex;
align-items:center;
}
div.sheet-blockAtman > label > input[type="number"]
{
width:calc(50% - 50px);
border:0px;
background-color:transparent;
border-bottom:1px solid black;
border-radius:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
text-align:center;
}
div.sheet-blockKarma
{
width:calc(50% - 2.5px);
display:flex;
flex-wrap:wrap;
margin-top:10px;
align-content:baseline;
}
div.sheet-blockKarma > h3,
div.sheet-blockEnseignements > h3,
div.sheet-blockMagie > h3,
div.sheet-blockOneLine > h3
{
width:100%;
display:flex;
font-size:18px;
font-variant:small-caps;
justify-content:center;
}
div.sheet-blockKarma > div.repcontainer,
div.sheet-blockEnseignements > div.repcontainer,
div.sheet-blockMagie > div > div.repcontainer
{
width:100%;
}
div.sheet-blockKarma > div.repcontainer > div.repitem:not(:first-of-type),
div.sheet-blockEnseignements > div.repcontainer > div.repitem:not(:first-of-type),
div.sheet-blockMagie > div > div.repcontainer > div.repitem:not(:first-of-type)
{
margin-top: 10px;
}
div.sheet-blockKarma > div.repcontainer > div.repitem,
div.sheet-blockEnseignements > div.repcontainer > div.repitem,
div.sheet-blockMagie > div > div.repcontainer > div.repitem
{
width:100%;
background-color: rgb(222, 219, 203);
padding:5px;
border-radius:5px;
}
div.sheet-blockKarma > div.repcontrol,
div.sheet-blockEnseignements > div.repcontrol,
div.sheet-blockMagie > div > div.repcontrol
{
width:100%;
}
div.sheet-blockKarma > div.repcontainer > div.repitem > input[type="text"],
div.sheet-blockEnseignements > div.repcontainer > div.repitem > input[type="text"],
div.sheet-blockMagie > div > div.repcontainer > div.repitem > input[type="text"]
{
width:100%;
display:flex;
border:0px;
background-color:transparent;
border-bottom:1px solid black;
border-radius:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
text-align:center;
}
div.sheet-blockKarma > div.repcontainer > div.repitem > div.itemcontrol,
div.sheet-blockEnseignements > div.repcontainer > div.repitem > div.itemcontrol,
div.sheet-blockMagie > div > div.repcontainer > div.repitem > div.itemcontrol
{
margin-left:-5px;
}
div.sheet-blockEnseignements,
div.sheet-blockMagie
{
width:calc(50% - 2.5px);
margin-top:10px;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
div.sheet-blockMagie > h4
{
width:calc(50% - 2px);
display:flex;
font-size:15px;
font-variant:small-caps;
justify-content:center;
}
div.sheet-blockMagie > div
{
width:calc(50% - 2px);
}
div.sheet-blockPouvoirs
{
display:flex;
flex-wrap:wrap;
background-color: rgb(222, 219, 203);
padding:5px;
border-radius:5px;
width: 100%;
margin-top: 10px;
}
div.sheet-blockPouvoirs > h3
{
width:100%;
display:flex;
font-size:18px;
font-variant:small-caps;
justify-content:center;
}
div.sheet-blockPouvoirs > div:first-of-type
{
width:100%;
display:flex;
justify-content:space-between;
}
div.sheet-blockPouvoirs > div:first-of-type > h4
{
width:calc(20% - 5px);
display:flex;
font-size:15px;
font-variant:small-caps;
justify-content:center;
text-align:center;
align-items:center;
}
div.sheet-blockPouvoirs > div:first-of-type > h4:nth-child(1),
div.sheet-blockPouvoirs > div:first-of-type > h4:nth-child(7)
{
width:60px;
}
div.sheet-blockPouvoirs > div.repcontainer > div.repitem > input[type="text"]
{
width:calc(20% - 5px);
display:flex;
padding:0px;
border-top:0px;
border-right:0px;
border-left:0px;
border-bottom:1px solid black;
}
div.sheet-blockPouvoirs > div:first-of-type > h4:nth-child(5),
div.sheet-blockPouvoirs > div:first-of-type > h4:nth-child(6),
div.sheet-blockPouvoirs > div.repcontainer > div.repitem > input[type="text"]:nth-child(7),
div.sheet-blockPouvoirs > div.repcontainer > div.repitem > input[type="text"]:nth-child(6)
{
width:calc(20% - 60px);
}
div.sheet-blockPouvoirs > div.repcontainer > div.repitem > input[type="text"]:nth-child(7)
{
text-align:center;
}
div.sheet-blockPouvoirs > div.repcontainer > div.repitem > input[type="number"]
{
text-align:center;
width:60px;
display:flex;
padding:0px;
border-top:0px;
border-right:0px;
border-left:0px;
border-bottom:1px solid black;
}
div.sheet-blockPouvoirs > div.repcontainer > div.repitem:not(:first-of-type)
{
margin-top:5px;
}
div.sheet-blockPouvoirs > div.repcontainer,
div.sheet-blockPouvoirs > div.repcontrol
{
width:100%;
}
div.sheet-blockPouvoirs > div.repcontainer > div.repitem
{
width:100%;
display:flex;
justify-content:space-between;
}
.sheet-rolltemplate-base
{
width:100%;
display:flex;
flex-wrap:wrap;
background-color: rgb(222, 219, 203);
border-radius:5px;
}
.sheet-rolltemplate-base h3
{
width:100%;
display:flex;
justify-content:center;
border-bottom:1px solid black;
padding-bottom:1px;
margin-bottom:1px;
}
.sheet-rolltemplate-base div
{
width:100%;
display:flex;
justify-content:space-between;
height:20px;
}
.sheet-rolltemplate-base div > div:first-child
{
width:calc(70% - 5px);
display:flex;
padding-left:5px;
align-items:center;
}
.sheet-rolltemplate-base div > div:last-child
{
width:calc(30% - 5px);
display:flex;
justify-content:center;
align-items:center;
}
.sheet-rolltemplate-base .inlinerollresult
{
border: 0px;
background-color:transparent;
}
.sheet-rolltemplate-base .inlinerollresult.fullcrit
{
border: 0px;
color:green;
}
.sheet-rolltemplate-base .inlinerollresult.fullfail
{
border: 0px;
}
.sheet-rolltemplate-base .inlinerollresult.importantroll
{
border: 0px;
color:green;
}