Files
roll20-character-sheets-tester/WFRP4CharSheet/WFRP4Charsheet.css
T
Medieve 8d7b9484f6 Warhammer Styling
Styling roll-template
2018-12-10 03:55:23 -07:00

709 lines
18 KiB
CSS

/* WARHAMMER FANTASY ROLEPLAY 4th EDITION CHARACTER SHEET CSS */
/* Version 1.55d */
/* CHARACTER SHEET */
.ui-dialog .charsheet {
padding: 1px;
}
.charsheet{
background-image:url(https://i.imgur.com/2dUILc6.jpg);
background-size:100%;
min-width: 820px;
font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-size:14px;
color:black;
text-align:center;
border: 27px solid transparent;
border-image: url(https://i.imgur.com/jn8yQ6h.png) 27 round;
padding: 0px !important;
}
.charsheet h1{
display:block;
font-size:2em;
margin-top:0.67em;
margin-bottom:0.67em;
margin-left:0;
margin-right:0;
font-weight:bold
}
/* 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: 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);
}
/* Input Styling */
.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;
box-shadow:none;
transition:none;
border-radius:none;
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;
background-position: center;
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;
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;
}
/* REPEATING FIELD BUTTONS */
.charsheet .repcontrol_add, .repcontrol_del, .repcontrol_edit, .repcontrol_move {
display: inline-block;
background: #8a959b;
color: black;
}
.charsheet .repcontrol_add, .repcontrol_move {
float: left! important;
}
.charsheet .repcontrol_edit {
float: right! important;
}
.charsheet .repcontrol_move {
float: left! important;
position: absolute;
bottom: 0px;
left: 35px;
}
.charsheet .repcontrol_del {
background:red;
float: left! important;
position: absolute;
bottom: 0px;
left: 0px;
}
/* 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;
}
/* Table Styling */
.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 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/CdomnU0.jpg);
min-width:220px;
max-width:220px;
width: 100%;
padding: 5px;
border: 10px solid transparent;
border-collapse: separate;
border-image: url(https://i.imgur.com/R9rWYJh.jpg) 10 round;
border-image-width: 10px;
font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
color:#cebbb3;
}
.sheet-rolltemplate-wfrp4 th {
width: 100%;
border: 0px solid;
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;
}
.sheet-rolltemplate-wfrp4 hr {
padding: 1px;
}
.sheet-rolltemplate-wfrp4 div {
padding: 1px;
}
.sheet-rolltemplate-wfrp4 .inlinerollresult {
display: inline-block;
min-width: 1.5em;
text-align: center;
background-color:black;
border: 2px solid #483c3e;
}
.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;
}
.sheet-rolltemplate-wfrp4 .sheet-rollcharacter {
font-size: 1.5em;
line-height: 1em;
color:white;
}
.sheet-rolltemplate-wfrp4 .sheet-rolltitle {
font-size: 1.25em;
line-height: 1.2em;
font-style: italic;
}
/* === 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;
}