Files
roll20-character-sheets-tester/WFRP4CharSheet/WFRP4Charsheet.css
T
2018-10-11 20:38:18 +02:00

660 lines
17 KiB
CSS

/* WARHAMMER FANTASY ROLEPLAY 4th EDITION CHARACTER SHEET CSS */
/* Version 1.55d */
/* REPLACE CHECKBOXES */
input[type="checkbox"] {
opacity: 0;
width: 16px;
height: 16px;
position: relative;
left: 16px;
margin: -10px;
z-index: 1;
}
input[type="checkbox"] + span::before {
margin-right: 1px;
border: solid 1px #a8a8a8;
line-height: 14px;
text-align: center;
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;
}
input[type="checkbox"] + span::before {
position:relative;
content: "";
background-image:url(http://i.imgur.com/c8Cx2mg.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
opacity: 1;
width: 20px;
height: 20px;
font-size: 10px;
border:none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
input[type="checkbox"]:checked + span::before {
content: "";
border:none;
background-image:url(http://i.imgur.com/MOtYDyu.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
-moz-box-shadow: 0 0 2px transparent;
-webkit-box-shadow: 0 0 2px transparent;
box-shadow: 0 0 2px transparent;
}
input[type="checkbox"]:checked ~ input[type="checkbox"] + span::before {
background: #f6f6f6;
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
background: radial-gradient(#f6f6f6, #dfdfdf);
}
/* CHARACTER SHEET */
.charsheet{
background-image:url(https://i.imgur.com/sIF6UDb.jpg);
background-size:100%;
font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size:14px;
color:black;
text-align:center;
}
.charsheet h1{
display:block;
font-size:2em;
margin-top:0.67em;
margin-bottom:0.67em;
margin-left:0;
margin-right:0;
font-weight:bold
}
/* Mouse Cursors */
/* Normal Cursor */
.charsheet
{
cursor: url(http://i.imgur.com/FaqICyL.png), auto;
}
/* Normal Cursor */
.charsheet .sheet-wrapper button[type="roll"]:hover, label:hover, .charsheet .sheet-wrapper .sheet-btn:hover,.charsheet .sheet-wrapper .sheet-hider input[type=checkbox]:checked ~ .sheet-btn,
{
cursor: url(http://i.imgur.com/FaqICyL.png), auto;
}
/* Write Cursor */
.charsheet .sheet-wrapper input[type=text], input[type=number], textarea
{
cursor: url(http://i.imgur.com/pY2uaXd.png), auto;
}
/* Select Cursor */
.charsheet .sheet-wrapper select:hover, button:hover, input[type=checkbox]:hover, sheet-tab:hover
{
cursor: url(http://i.imgur.com/OYpiryU.png) 10 10, auto;
}
/* Disabled Cursor */
.charsheet .sheet-wrapper select:disabled, button:disabled, input:disabled
{
cursor: url(http://i.imgur.com/B3IzNW1.png), auto;
}
.charsheet .sheet-wrapper .sheet-table td:first-child{
width:70%;
height:24px;
border-bottom:1px solid black;
border-bottom-style:dotted;
}
.charsheet .sheet-wrapper .sheet-table td:nth-child(n+2){
width:24px;
height:24px;
border-bottom:1px solid black;
border-bottom-style:dotted;
text-align:center
}
.charsheet .sheet-wrapper hr{
border:1px #545454;
}
.charsheet .sheet-wrapper div,.charsheet .sheet-wrapper span,.charsheet .sheet-wrapper label,.charsheet .sheet-wrapper h1,.charsheet .sheet-wrapper h2,.charsheet .sheet-wrapper h3,.charsheet .sheet-wrapper h4,.charsheet .sheet-wrapper h5,.charsheet .sheet-wrapper h6,.charsheet .sheet-wrapper p,.charsheet .sheet-wrapper table,.charsheet .sheet-wrapper caption,.charsheet .sheet-wrapper tbody,.charsheet .sheet-wrapper tfoot,.charsheet .sheet-wrapper thead,.charsheet .sheet-wrapper tr,.charsheet .sheet-wrapper th,.charsheet .sheet-wrapper td{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
color:#000000;
vertical-align:baseline;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box
}
.charsheet .sheet-wrapper table{
border-collapse:collapse;
border-spacing:0
}
.charsheet .sheet-wrapper input::-webkit-outer-spin-button,.charsheet .sheet-wrapper input::-webkit-inner-spin-button{
-webkit-appearance:none;
background-image:transparent;
margin:0
}
.charsheet .sheet-wrapper input[type="number"]{
-moz-appearance:textfield
}
.charsheet .sheet-wrapper button[type="roll"]:before{
content:"" !important;
display:none
}
.charsheet .sheet-wrapper button[type="roll"],.charsheet .sheet-wrapper .sheet-btn{
width:100%;
height:24px;
vertical-align:middle;
padding:0;
display:inline-block;
margin:0;
font-weight:400;
text-align:center;
vertical-align:middle;
cursor:pointer;
background-image:none;
background-color:transparent;
border:1px solid #ccc;
white-space:nowrap;
border-radius:4px;
border-color:#545454;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box
}
.charsheet .sheet-wrapper button[type="roll"]:hover,.charsheet .sheet-wrapper .sheet-btn:hover,.charsheet .sheet-wrapper .sheet-hider input[type=checkbox]:checked ~ .sheet-btn{
background-color:#831010;
border-color:#831010;
}
/* BUTTONS */
.charsheet .sheet-wrapper button {
font-size:13px;
vertical-align:middle;
text-align:center;
cursor:pointer;
background-image:none;
background:transparent;
box-shadow:none;
transition:none;
border-radius:none;
color:black;
border:1px solid black;
font-weight:700
}
.charsheet .sheet-wrapper button:hover {
background-image:url ('https://i.imgur.com/xV3ceZB.png');
background-size:100% 100%;
background-repeat:no-repeat;
border-color:black;
color:white;
}
.charsheet .sheet-wrapper button[type="roll"] label,.charsheet .sheet-wrapper button[type="roll"] input{
height:24px;
line-height:24px;
font-size:13px;
vertical-align:middle;
text-align:center;
width:99%;
cursor:pointer;
background-image:none;
background:transparent;
box-shadow:none;
transition:none;
border-radius:none;
color:black;
border:1px;
border-color:black;
font-weight:700
}
.charsheet .sheet-wrapper button[type="roll"]:hover label,.charsheet .sheet-wrapper button[type="roll"]:hover input{
color:white;
border-color:black;
}
.charsheet .sheet-wrapper h3{
color:black;
padding:3px;
margin-bottom:5px;
font-size:18px;
font-weight:bold;
font-family:inherit;
text-transform:uppercase;
text-align:center
}
.charsheet .sheet-wrapper h4{
color:black;
font-weight:bold;
font-family:inherit;
text-transform:uppercase;
text-align:center
}
.charsheet .sheet-wrapper textarea{
display:inline-block;
border:1px solid black;
padding:2px;
height:24px;
width:100%;
font-size:14px;
font-family:inherit;
line-height:16px;
font-weight:normal;
margin:0;
color:black;
background-color:transparent;
vertical-align:middle;
cursor:auto;
letter-spacing:normal;
word-spacing:normal;
text-transform:none;
text-indent:0px;
text-shadow:none;
text-align:start;
-webkit-rtl-ordering:logical;
-webkit-user-select:text;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition:border linear .2s,box-shadow linear .2s;
-moz-transition:border linear .2s,box-shadow linear .2s;
-ms-transition:border linear .2s,box-shadow linear .2s;
-o-transition:border linear .2s,box-shadow linear .2s;
transition:border linear .2s,box-shadow linear .2s;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-writing-mode:horizontal-tb
}
.charsheet .sheet-wrapper input,.charsheet .sheet-wrapper select,.charsheet .sheet-wrapper input[type="number"]{
display:inline-block;
border-bottom:1px dotted grey;
border-top:none;
border-left:none;
border-right:none;
padding:2px;
height:24px;
width:100%;
font-size:14px;
font-family:inherit;
line-height:16px;
font-weight:normal;
margin:0;
color:#000000;
background-color:transparent;
vertical-align:middle;
cursor:auto;
letter-spacing:normal;
word-spacing:normal;
text-transform:none;
text-indent:0px;
text-shadow:none;
text-align:start;
-webkit-rtl-ordering:logical;
-webkit-user-select:text;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition:border linear .2s,box-shadow linear .2s;
-moz-transition:border linear .2s,box-shadow linear .2s;
-ms-transition:border linear .2s,box-shadow linear .2s;
-o-transition:border linear .2s,box-shadow linear .2s;
transition:border linear .2s,box-shadow linear .2s;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-writing-mode:horizontal-tb
}
.charsheet .sheet-wrapper input:not([type='checkbox']){
-webkit-appearance:textfield
}
.charsheet .sheet-wrapper input[type="checkbox"]{
height:13px;
width:13px;
color:#555;
border:1px solid #000000;
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition:border linear .2s,box-shadow linear .2s;
-moz-transition:border linear .2s,box-shadow linear .2s;
-ms-transition:border linear .2s,box-shadow linear .2s;
-o-transition:border linear .2s,box-shadow linear .2s;
transition:border linear .2s,box-shadow linear .2s
}
.charsheet .sheet-wrapper input[disabled],.charsheet .sheet-wrapper select[disabled],.charsheet .sheet-wrapper textarea[disabled],.charsheet .sheet-wrapper input[readonly],.charsheet .sheet-wrapper select[readonly],.charsheet .sheet-wrapper textarea[readonly]{
background-color:transparent;
border-color:#000000;
cursor:not-allowed
}
.charsheet .sheet-wrapper textarea{
width:98%;
height:80px;
line-height:16px
}
.charsheet .sheet-wrapper label{
display:inline-block;
width:100%;
font-size:14px;
text-align:left;
font-weight:600;
height:24px;
line-height:24px;
vertical-align:middle
}
.charsheet .sheet-wrapper .sheet-characteristics button[type="roll"] label,.charsheet .sheet-wrapper .sheet-characteristics button[type="roll"] input.sheet-charMain{
height:25px;
line-height:25px;
font-size:16px;
font-weight:bold;
font-family:inherit;
vertical-align:center;
text-align:center;
width:99%;
cursor:pointer;
background:none;
box-shadow:none;
transition:none;
border-radius:none;
border:none
}
.charsheet .sheet-wrapper .sheet-characteristics button[type="roll"]:hover label,.charsheet .sheet-wrapper .sheet-characteristics button[type="roll"]:hover input.sheet-charMain{
color:#fff;
border:none;
background-color:#DAA520;
border-color:#DAA520;
border-radius:5px
}
.charsheet .sheet-wrapper .sheet-characteristics button[type="roll"]{
border:none;
background-color:transparent;
width:100%;
margin:auto;
text-align:center;
font-family:inherit
}
.charsheet .sheet-wrapper .sheet-characteristics select{
display:inline-block;
width:100%;
text-align:center;
background-color:transparent;
border:0;
font-weight:bold
}
.charsheet .sheet-wrapper .sheet-characteristics input.sheet-charMain{
display:block;
border:1px solid gray;
background-color:transparent;
width:70%;
height:65px;
margin:auto;
text-align:center;
font-weight:bolder;
font-family:inherit;
font-size:3em
}
.sheet-input-selectbox{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-ms-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
text-align:center;
text-align-last:center;
border:none;
box-shadow:none
}
/* BUTTONS */
input.sheet-arrow[type="checkbox"]{
opacity:0;
width:20px;
height:20px;
position:relative;
top:0px;
left:16px;
cursor:pointer;
z-index:1
}
.charsheet .sheet-wrapper .sheet-item{
display:inline-block;
width:100%;
height:28px;
vertical-align:middle;
margin:0 -2px;
text-align:left;
padding:3px 2px
}
input.sheet-arrow[type="checkbox"] + span::before{
background:url("https://i.imgur.com/dFig3jt.png");
background-size:20px 20px;
background-repeat:no-repeat;
background-position:center;
content:"";
line-height:14px;
text-align:center;
display:inline-block;
vertical-align:middle;
border-radius:10px;
border:1px solid black;
width:20px;
height:20px
}
input.sheet-arrow[type="checkbox"]:checked + span::before{
background:url("https://i.imgur.com/2V2A4qm.png");
background-size:20px 20px;
background-repeat:no-repeat;
background-position:center;
content:"";
width:20px;
height:20px
}
input.sheet-arrow[type="checkbox"]:hover + span::before{
background:url("https://i.imgur.com/Ig3Ww6v.png");
background-size:20px 20px;
background-repeat:no-repeat;
background-position:center;
content:"";
line-height:14px;
text-align:center;
display:inline-block;
vertical-align:middle;
border-radius:10px;
border:1px solid black;
width:20px;
height:20px
}
div.sheet-body{
display:none
}
input.sheet-arrow:checked ~ div.sheet-body{
display:block
}
table.sheet-armortable{
background-image:url("https://i.imgur.com/ohregeQ.png");
background-size: 60% 80%;
background-repeat: no-repeat;
background-position: center 70px;
}
td.sheet-armorshield{
background-image:url("https://i.imgur.com/c4KfHLg.png");
background-size: 95% auto;
background-repeat: no-repeat;
background-position: center 37px;
}
.sheet-rolltemplate-wfrp4 table {
background-image:url(https://i.imgur.com/sIF6UDb.jpg);
min-width:220px;
max-width:220px;
width: 100%;
border: 1px solid;
color: black;
font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}
.sheet-rolltemplate-wfrp4 th {
width: 100%;
border: 1px solid;
border: black;
background-color:#785604;
color: white;
font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}
.sheet-rolltemplate-wfrp4 .userscript-tcat {
color: black;
}
.sheet-rolltemplate-wfrp4 td {
padding: 1px;
border-bottom: 1px solid black;
}
.sheet-rolltemplate-wfrp4 hr {
padding: 1px;
border-bottom: 1px solid black;
}
.sheet-rolltemplate-wfrp4 div {
padding: 1px;
border-bottom: 1px solid black;
}
.sheet-rolltemplate-wfrp4 .inlinerollresult {
display: inline-block;
min-width: 1.5em;
text-align: center;
border: 2px solid rgba(167, 168, 170,1); /*Cool Gray 6 C*/
}
.sheet-rolltemplate-wfrp4 .inlinerollresult.fullcrit {
border: 2px solid #3FB315;
}
.sheet-rolltemplate-wfrp4 .inlinerollresult.fullfail {
border: 2px solid #B31515;
}
.sheet-rolltemplate-wfrp4 .inlinerollresult.importantroll {
border: 2px solid #4A57ED;
}
/* === TABS from GODBOUND.css === */
.sheet-wrapper div[class^="sheet-section"]{
display: none !important;
}
input.sheet-tab-page-1:checked ~ div.sheet-section-1,
input.sheet-tab-page-2:checked ~ div.sheet-section-2,
input.sheet-tab-page-3:checked ~ div.sheet-section-3,
input.sheet-tab-page-4:checked ~ div.sheet-section-4
{
display: block !important;
}
input[class*="sheet-tab"]{
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
span[class*="sheet-tab"]{
display: inline-block;
position: relative;
font-size: 13px;
color: #204060;
cursor: pointer;
font-weight: bold;
text-align: center;
border: 1px solid black;
border-color: #204060 !important;
border-radius: 4px;
}
input[class*="sheet-tab-page"],
span[class*="sheet-tab-page"]{
width: 100px;
height: 18px;
vertical-align: top;
}
span[class*="sheet-tab-page"]{
background-color: transparent;
}
input.sheet-tab-page-1,
span.sheet-tab-page-1{
width: 100px;
}
span.sheet-tab-page-1{
margin-left: -100px;
}
input.sheet-tab-page-2,
span.sheet-tab-page-2{
width: 100px;
}
span.sheet-tab-page-2{
margin-left: -100px;
}
input.sheet-tab-page-3,
span.sheet-tab-page-3{
width: 100px;
}
span.sheet-tab-page-3{
margin-left: -100px;
}
input.sheet-tab-page-4,
span.sheet-tab-page-4{
width: 100px;
}
span.sheet-tab-page-4{
margin-left: -100px;
}
input.sheet-tab-page-1:checked + span.sheet-tab-page-1,
input.sheet-tab-page-2:checked + span.sheet-tab-page-2,
input.sheet-tab-page-3:checked + span.sheet-tab-page-3,
input.sheet-tab-page-4:checked + span.sheet-tab-page-4
{
background-color: #204060;
color: white;
}
.sheet-section-1 select,
.sheet-section-2 select,
.sheet-section-3 select,
.sheet-section-4 select .sheet-checkbox-row-height{
height: 19px;
}