mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
Rats808
c93901606e
* Create Werewolf the Forsaken 2e Sheet * Update sheet.json * Update Wr20.html * Update Wr20.css * Update Wr20.html * Update Wr20.css * Update Wr20.html * Woops * Woops part 2 * Woops part 3 * Switching sheet.json back to markdown
323 lines
8.7 KiB
CSS
323 lines
8.7 KiB
CSS
.charsheet label {
|
|
display: inline-block;
|
|
width: 75px;
|
|
text-align: right;
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
.charsheet input {
|
|
display: inline-block;
|
|
width: 155px;
|
|
}
|
|
|
|
.charsheet {
|
|
background-color: white;
|
|
}
|
|
|
|
.charsheet select {
|
|
width: 42px;
|
|
}
|
|
|
|
|
|
.charsheet input[type="radio"],.charsheet input[type="checkbox"]
|
|
{
|
|
position: absolute;
|
|
opacity: 0;
|
|
width:15px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
|
|
.charsheet input[type="radio"] + span::before,.charsheet input[type="checkbox"] + span::before
|
|
{
|
|
content: "";
|
|
border: solid 1px #a8a8a8;
|
|
line-height: 14px;
|
|
text-align: middle;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
|
|
-moz-box-shadow: 0 0 2px #ccc;
|
|
-webkit-box-shadow: 0 0 2px #ccc;
|
|
box-shadow: 0 0 2px #ccc;
|
|
|
|
background: #060606;
|
|
}
|
|
|
|
|
|
.charsheet input[type="radio"] + span::before
|
|
{
|
|
width: 12px;
|
|
height: 12px;
|
|
|
|
-moz-border-radius: 50%;
|
|
-webkit-border-radius: 50%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
|
|
.charsheet input[type="checkbox"] + span::before
|
|
{
|
|
position:relative;
|
|
opacity: .25;
|
|
width: 14px;
|
|
height: 14px;
|
|
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
|
|
.charsheet input[type="checkbox"]:checked + span::before
|
|
{
|
|
background:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 0.8px),
|
|
rgba(0,0,0,1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 0.8px),
|
|
rgba(0,0,0,0) 100%),
|
|
linear-gradient(to top right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 0.8px),
|
|
rgba(0,0,0,1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 0.8px),
|
|
rgba(0,0,0,0) 100%);
|
|
|
|
-moz-box-shadow: 0 0 2px transparent;
|
|
-webkit-box-shadow: 0 0 2px transparent;
|
|
box-shadow: 0 0 2px transparent;
|
|
}
|
|
|
|
|
|
.charsheet input[type="radio"]:checked ~ input[type="radio"] + span::before
|
|
{
|
|
background: #f6f6f6;
|
|
}
|
|
|
|
.charsheet input.sheet-used+span::before
|
|
{
|
|
background:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 0.8px),
|
|
rgba(0,0,0,1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 0.8px),
|
|
rgba(0,0,0,0) 100%),
|
|
linear-gradient(to top right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 0.8px),
|
|
rgba(0,0,0,1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 0.8px),
|
|
rgba(0,0,0,0) 100%);
|
|
|
|
width: 12px;
|
|
height: 12px;
|
|
font-size: 12px;
|
|
|
|
-moz-border-radius: 0%;
|
|
-webkit-border-radius: 0%;
|
|
border-radius: 0%;
|
|
}
|
|
|
|
.charsheet input.sheet-zero:checked + span::before
|
|
{
|
|
opacity: 0;
|
|
}
|
|
|
|
.charsheet input.sheet-zero:hover + span::before
|
|
{
|
|
opacity: 1;
|
|
}
|
|
|
|
.charsheet input.sheet-zero+ span::before
|
|
{
|
|
font-size: 12px;
|
|
background:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 0.8px),
|
|
rgba(0,0,0,1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 0.8px),
|
|
rgba(0,0,0,0) 100%),
|
|
linear-gradient(to top right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 0.8px),
|
|
rgba(0,0,0,1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 0.8px),
|
|
rgba(0,0,0,0) 100%);
|
|
opacity: 0.25;
|
|
}
|
|
|
|
.charsheet input.sheet-DP1Spec + span::before,.charsheet input.sheet-DP2Spec + span::before,.charsheet input.sheet-DP2Spec + span::before,.charsheet input.sheet-DP3Spec + span::before,.charsheet input.sheet-DP4Spec + span::before,.charsheet input.sheet-DP5Spec + span::before
|
|
{
|
|
opacity: 1;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.charsheet div.sheet-DP1,.charsheet div.sheet-DP2,.charsheet div.sheet-DP2,.charsheet div.sheet-DP3,.charsheet div.sheet-DP4,.charsheet div.sheet-DP5
|
|
{
|
|
display: inline;
|
|
}
|
|
.charsheet div.sheet-DP1wSpec,.charsheet div.sheet-DP2wSpec,.charsheet div.sheet-DP2wSpec,.charsheet div.sheet-DP3wSpec,.charsheet div.sheet-DP4wSpec,.charsheet div.sheet-DP5wSpec
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.charsheet input.sheet-DP1Spec:checked ~ div.sheet-DP1,.charsheet input.sheet-DP2Spec:checked ~ div.sheet-DP2,.charsheet input.sheet-DP2Spec:checked ~ div.sheet-DP2,.charsheet input.sheet-DP3Spec:checked ~ div.sheet-DP3,.charsheet input.sheet-DP4Spec:checked ~ div.sheet-DP4,.charsheet input.sheet-DP5Spec:checked ~ div.sheet-DP5
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.charsheet input.sheet-DP1Spec:checked ~ div.sheet-DP1wSpec,.charsheet input.sheet-DP2Spec:checked ~ div.sheet-DP2wSpec,.charsheet input.sheet-DP2Spec:checked ~ div.sheet-DP2wSpec,.charsheet input.sheet-DP3Spec:checked ~ div.sheet-DP3wSpec,.charsheet input.sheet-DP4Spec:checked ~ div.sheet-DP4wSpec,.charsheet input.sheet-DP5Spec:checked ~ div.sheet-DP5wSpec
|
|
{
|
|
display: inline;
|
|
}
|
|
|
|
.charsheet h4.sheet-SCorI1,.charsheet h4.sheet-SCorI2,.charsheet h4.sheet-CorC1,.charsheet h4.sheet-CorC2
|
|
{
|
|
display: block;
|
|
}
|
|
|
|
.charsheet input.sheet-SCorI1,.charsheet input.sheet-SCorI2,.charsheet input.sheet-CorC1,.charsheet input.sheet-CorC2
|
|
{
|
|
width: 120px;
|
|
}
|
|
|
|
.charsheet input.sheet-SCorI1:checked ~ h4.sheet-SCorI1,.charsheet input.sheet-SCorI2:checked ~ h4.sheet-SCorI2
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
.charsheet input.sheet-CorC1:checked ~ h4.sheet-CorC1,.charsheet input.sheet-CorC2:checked ~ h4.sheet-CorC2
|
|
{
|
|
display: none;
|
|
}
|
|
.charsheet .sheet-healthboxcontainer .sheet-healthbox + span::before{
|
|
border-radius: 0%;
|
|
display: none;
|
|
background: white;
|
|
}
|
|
.charsheet .sheet-healthboxcontainer .sheet-healthbox:checked + span::before{
|
|
display: inline-block;
|
|
}
|
|
.charsheet .sheet-healthboxcontainer .sheet-bash + span::before{
|
|
background:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 0.8px),
|
|
rgba(0,0,0,1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 0.8px),
|
|
rgba(0,0,0,0) 100%);
|
|
}
|
|
.charsheet .sheet-healthboxcontainer .sheet-leth + span::before{
|
|
background:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 0.8px),
|
|
rgba(0,0,0,1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 0.8px),
|
|
rgba(0,0,0,0) 100%),
|
|
linear-gradient(to top right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 0.8px),
|
|
rgba(0,0,0,1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 0.8px),
|
|
rgba(0,0,0,0) 100%);
|
|
}
|
|
.charsheet .sheet-healthboxcontainer .sheet-agg + span::before{
|
|
background:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 0.8px),
|
|
rgba(0,0,0,1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 0.8px),
|
|
rgba(0,0,0,0) 100%),
|
|
linear-gradient(to top right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 0.8px),
|
|
rgba(0,0,0,1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 0.8px),
|
|
rgba(0,0,0,0) 100%),
|
|
linear-gradient(to right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 0.8px),
|
|
rgba(0,0,0,1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 0.8px),
|
|
rgba(0,0,0,0) 100%);
|
|
}
|
|
.charsheet .sheet-healthboxcontainer .sheet-blank + span::before{
|
|
background: black;
|
|
}
|
|
.charsheet .sheet-healthboxcontainer .sheet-healthbox{
|
|
z-index: 101;
|
|
}
|
|
.charsheet .sheet-healthboxcontainer .sheet-empty{
|
|
z-index: 102;
|
|
}
|
|
input.sheet-empty:checked ~ input.sheet-bash,
|
|
input.sheet-bash:checked ~ input.sheet-leth,
|
|
input.sheet-leth:checked ~ input.sheet-agg,
|
|
input.sheet-agg:checked ~ input.sheet-blank,
|
|
input.sheet-blank:checked ~ input.sheet-empty
|
|
{
|
|
z-index: 103;
|
|
margin-top: -10px;
|
|
}
|
|
.charsheet .sheet-healthboxcontainer{
|
|
float: left;
|
|
margin-left: 18px;
|
|
}
|
|
.charsheet .sheet-hbspace{
|
|
float: left;
|
|
margin-left: 3.5px;
|
|
}
|
|
.charsheet .sheet-healthboxcontainer .sheet-hbspace:first-child{
|
|
margin-left: 0px;
|
|
}
|
|
.charsheet input[type=text]{
|
|
border: none;
|
|
border-bottom: 1px black solid;
|
|
border-radius: 0%;
|
|
}
|
|
.charsheet textarea{
|
|
border: 1px black solid;
|
|
border-radius: 0%;
|
|
resize: none;
|
|
}
|
|
.charsheet .sheet-tempnote{
|
|
border: 1px solid red;
|
|
margin-top: -2px;
|
|
}
|
|
.charsheet input[type=checkbox].sheet-notificationread + span::before{
|
|
background:
|
|
linear-gradient(to top left,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 1px),
|
|
rgba(0,0,0,1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 1px),
|
|
rgba(0,0,0,0) 100%),
|
|
linear-gradient(to top right,
|
|
rgba(0,0,0,0) 0%,
|
|
rgba(0,0,0,0) calc(50% - 1px),
|
|
rgba(0,0,0,1) 50%,
|
|
rgba(0,0,0,0) calc(50% + 1px),
|
|
rgba(0,0,0,0) 100%) !important;
|
|
border: 1px solid red;
|
|
border-bottom: 1px solid white;
|
|
border-radius: 0%;
|
|
opacity: 1;
|
|
}
|
|
.charsheet input[type=checkbox].sheet-notificationread:checked + span::before{
|
|
display: none;
|
|
}
|
|
.charsheet input[type=checkbox].sheet-notificationread:checked ~ .sheet-tempnote{
|
|
display: none;
|
|
}
|
|
.charsheet .sheet-tempnote span{
|
|
content: attr(name);
|
|
}
|