diff --git a/Iron Kingdoms RPG/IKPRG.css b/Iron Kingdoms RPG/IKPRG.css index 47bdb00187..bdfeee7920 100644 --- a/Iron Kingdoms RPG/IKPRG.css +++ b/Iron Kingdoms RPG/IKPRG.css @@ -32,6 +32,19 @@ font-size:0.9em; height:2.2em; } +.charsheet .repcontrol_move { + display: inline-block; + background:green; + color:white; + text-shadow:0px 0px 2px silver,0px 0px 2px silver,0px 0px 2px silver; + box-shadow:none; + float:none!important; + margin-bottom:5px; + font-size:0.9em; + height:1.4em; + padding-top:2px; + padding-bottom:2px; + } /*-----background-----*/ .charsheet { background: black; @@ -112,8 +125,6 @@ input.sheet-tab[type=radio]:checked + label { text-shadow: 0px 0px 2px white; -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05); } - - .sheet-tab-content { background: url ('http://fc06.deviantart.net/fs71/f/2011/359/1/3/steampunk_wallpaper_by_satyrgod-d4k5ar3.jpg'); width: 840px; @@ -161,7 +172,6 @@ div.sheet-body { { color: white; - text-shadow: 0px 0px 0.2em #6C3306; } table td { color: white; @@ -234,7 +244,37 @@ h5.sheet-black { padding-left:10px; padding-right:10px; } +textarea.sheet-ability { + color: black; + background: rgba(255,255,192,0.65); + border:none; + box-shadow:none; + font-weight: bold; + color: black; + text-shadow:none; + + border-radius:20px; + padding-left:10px; + padding-right:10px; + height:75px; +} +input.sheet-ability { + + color: black; + background: rgba(255,255,192,0.65); + + border:none; + box-shadow:none; + font-weight: bold; + color: black; + text-shadow:none; + + border-radius:20px; + padding-left:10px; + padding-right:10px; + width:100%; +} .sheet-stats-base { background:transparent; text-align: center; @@ -315,12 +355,6 @@ h5.sheet-black { color: green; } -.sheet-general { - color: white; - text-shadow: 0px 0px 0.2em #6C3306; - font-style:italic; -} - textarea { height: 36px; margin: 5px 0px 0px 0px; @@ -328,10 +362,15 @@ textarea { overflow-y:hidden; } .sheet-rasied_border { + background-color: transparent; + border-color: #013220; + border-style: solid; + border-width: 0px; + border-bottom-width: 3px; + border-right-width: 4px; + border-top-right-radius: 16px; + background-size: auto; border-radius:15px; - box-shadow: inset 0px 0px 10px black, inset 0px 0px 8px black,inset 0px 0px 4px black; - padding: 2px; - width:800px; } /*----removing spinner on numbers----*/ input.sheet-stats-base::-webkit-outer-spin-button , @@ -440,22 +479,22 @@ input.sheet-showhide:checked ~ div.sheet-two_block /*==========feat number button==========*/ div.sheet-feat { - width: 195px; - height: 30px; + width: 80px; + height: 80px; position: relative; } input.sheet-feat { - margin: 20px 0 0 50px; - opacity: 00; + position: absolute; + margin: 5px 0 0 0px; + opacity: 0; width: 80px; height: 80px; - position: absolute; z-index: 1; } span.sheet-feat { - margin: 10px 0 0 40px; + margin: -5px 0px 0px -10px; display: none; } @@ -501,7 +540,173 @@ input.sheet-threefeat:checked ~ span.sheet-threefeat { display: inline-block; } background: url("http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/abstract-red-and-gold-paint-splatter-icons-alphanumeric/068228-abstract-red-and-gold-paint-splatter-icon-alphanumeric-m03-clear.png") no-repeat 0 0; background-size: 100%; } + /* ==== Featup & Down ==== */ +/* ----Hide actual sheet-featup checkbox---- */ +input.sheet-featup[type="checkbox"] { + opacity: 0; + margin-right: 10px; + width: 30px; + height: 30px; + position: relative; + top: 0px; + left: 25px; + margin: -10px; + cursor: pointer; + z-index: 1; +} + +/* -----Fake sheet-featup checkbox----- */ + +input.sheet-featup[type="checkbox"] + span::before +{ + position:relative; + top:0px; + left:1px; + margin-right: 10px; + margin-left: 5px; + line-height: 30px; + width: 30px; + height: 30px; + text-align: center; + display: inline-block; + vertical-align: middle; + + background:transparent; + color: black; + text-shadow:0px 0px 5px white; + font-family:"Pictos"; + content: "4"; + font-size:30px; + -ms-transform: rotate(-90deg); /* IE 9 */ + -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */ + transform: rotate(-90deg); +} + +input.sheet-featup[type="checkbox"]:hover + span::before { + color: red; + text-shadow:0px 0px 5px black; +} +/* ----Hide actual sheet-featdown checkbox---- */ + +input.sheet-featdown[type="checkbox"] { + opacity: 0; + margin-right: 10px; + width: 30px; + height: 30px; + position: relative; + top: 0px; + left: 25px; + margin: -10px; + cursor: pointer; + z-index: 1; +} + +/* -----Fake sheet-featdown checkbox----- */ + +input.sheet-featdown[type="checkbox"] + span::before +{ + position:relative; + top:0px; + left:0px; + margin-right: 10px; + margin-left: 5px; + line-height: 30px; + width: 30px; + height: 30px; + text-align: center; + display: inline-block; + vertical-align: middle; + + background:transparent; + color: black; + text-shadow:0px 0px 5px white; + + font-family:"Pictos"; + content: "4"; + font-size:30px; + -ms-transform: rotate(90deg); /* IE 9 */ + -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ + transform: rotate(90deg); +} + +input.sheet-featdown[type="checkbox"]:hover + span::before { + color: red; + text-shadow:0px 0px 5px black; +} + +/*========== sheet reset ==========*/ +input.sheet-reset[type="checkbox"] { + opacity: 0; + width: 16px; + height: 16px; + position: relative; + top: 5px; + left: 8px; + top:0px; + margin: 0px; + cursor: pointer; + z-index: 1; +} + +/* -----Fake sheet-reset checkbox----- */ + +input.sheet-reset[type="checkbox"] + span::before +{ + position: relative; + left:-7px; + margin-right: 0px; + line-height: 14px; + text-align: center; + display: inline-block; + vertical-align: middle; + content: ""; + width: 14px; + height: 14px; + border-radius:50%; + background:black; +} + +input.sheet-reset[type="checkbox"]:active + span::before { + background:#9C0606; +}/*========== sheet health ==========*/ +input.sheet-health[type="checkbox"] { + opacity: 0; + width: 16px; + height: 16px; + position: relative; + top: 5px; + left: 8px; + top:0px; + margin: 0px; + cursor: pointer; + z-index: 1; +} + +/* -----Fake sheet-health checkbox----- */ + +input.sheet-health[type="checkbox"] + span::before +{ + position: relative; + left:-7px; + margin-right: 0px; + line-height: 14px; + text-align: center; + display: inline-block; + vertical-align: middle; + content: ""; + width: 14px; + height: 14px; + background:white; + border: 1px solid #006400; + border-radius:50%; + box-shadow: inset 0px 0px 15px green, 0px 0px 15px green; +} + +input.sheet-health[type="checkbox"]:active + span::before { + border: 1px solid #8B0000; + box-shadow: inset 0px 0px 15px red, 0px 0px 15px red; +} /*========== sheet arrow ==========*/ /* ----Hide actual sheet-arrow checkbox---- */ @@ -543,11 +748,13 @@ input.sheet-arrow[type="checkbox"]:checked + span::before { input.sheet-arrow { float: left; } -input.sheet-arrow:checked ~ div.sheet-body, -input.sheet-hider:checked ~ div.sheet-body { +input.sheet-arrow:checked ~ div.sheet-body { display: block; } +input.sheet-hider:checked ~ div.sheet-body { + display: block; + } /*========== sheet gear ==========*/ /* ----Hide actual sheet-gear checkbox---- */ @@ -588,16 +795,10 @@ input.sheet-gear[type="checkbox"]:checked + span::before { color: black; text-shadow: 0px 0px 2px silver,0px 0px 2px silver,0px 0px 2px silver; } - -/* -----Hiding areas with sheet-gear ----- */ - input.sheet-gear { float: left; } -input.sheet-gear:checked ~ div.sheet-body { - display: block; -} /*========== sheet sign ==========*/ @@ -639,16 +840,10 @@ input.sheet-sign[type="checkbox"]:checked + span::before { color: black; text-shadow: 0px 0px 2px silver,0px 0px 2px silver,0px 0px 2px silver; } - -/* -----Hiding areas with sheet-sign ----- */ - input.sheet-sign { float: left; } -input.sheet-sign:checked ~ div.sheet-body { - display: block; -} /*========== Big Checkbox ==========*/ /* ----Hide actual Big Checkbox---- */ @@ -717,7 +912,7 @@ input.sheet-aj[type="checkbox"] { z-index: 1; } -/* ----Fake Big Checkbox ---- */ +/* ----Fake aj ---- */ input.sheet-aj[type="checkbox"] + span::before { margin-right: 10px; margin-left: 5px; @@ -732,22 +927,25 @@ input.sheet-aj[type="checkbox"] + span::before { background:transparent; } - + input.sheet-aj[type="checkbox"] + span::before { font-family:"Pictos"; content: "j"; width: 14px; height: 14px; font-size: 1.5em; + font-weight:bold; + color: black; + text-shadow: 0px 0px 2px white,0px 0px 2px white,0px 0px 2px white; } input.sheet-aj[type="checkbox"]:checked + span::before { color: #9C0606; font-family:"Pictos"; - content: "A"; - font-weight:bold; + content: "A"; } + /*==========jack damage grid==========*/ div.sheet-jackbox { @@ -1203,34 +1401,140 @@ input.sheet-powerfield_on:checked ~ span.sheet-powerfield_on, input.sheet-powerfield_empty:checked ~ span.sheet-powerfield_empty { display: inline-block; } .sheet-powerfield_empty { - width: 20px; - height: 20px; - background: url("http://40.media.tumblr.com/80a7794633d6315a7ab367b57e7ab968/tumblr_mwau0fOk961qecbloo1_1280.png") no-repeat 0 0; - background-size: 100%; - -webkit-filter: drop-shadow(0px 0px 5px blue); + width: 15px; + height: 15px; + background: transparent; + border-radius:50%; + border: 2px solid blue; + } .sheet-powerfield_on { - width: 20px; - height: 20px; - background: url("http://upload.wikimedia.org/wikipedia/commons/1/17/Ski_trail_rating_symbol_blue_circle.png") no-repeat 0 0; - background-size: 100%; - -webkit-filter: drop-shadow(0px 0px 5px black); + width: 15px; + height: 15px; + background: blue; + border-radius:50%; + border: 2px solid blue; } .sheet-powerfield_off { - width: 20px; - height: 20px; - background: url("http://i.stack.imgur.com/LOhIq.png") no-repeat 0 0; - background-size: 100%; - -webkit-filter: drop-shadow(0px 0px 5px black); + width: 19px; + height: 19px; + background: transparent; + border-radius:50%; + border: none; /* 2px solid #9a7647; #eae0c8 #9a7647 */ + box-shadow: inset 0px 0px 15px black; } table.sheet-table_center { margin-left:auto; margin-right:auto; } +/*==========Button Reset==========*/ +/*================================*/ +/*================================*/ +button[type="roll"].sheet-btn:before { + content: ""!important; + display: none; +} +button[type="roll"].sheet-btn { + width: 100%; + height:24px; + vertical-align: middle; + display: inline-block; + margin: 0; + font-weight: 700; + text-align: left; + vertical-align: middle; + cursor: pointer; + background-image: none; + border-radius:5px; + + background-color: transparent; + border: 2px outset gray; + border-style: outset; + padding: 2px; + padding-left:2px; + font-size: 1em; + color: white; + text-shadow: 0px 0px 0.2em #6C3306; +} +button[type="roll"].sheet-btn:hover { + border: 2px inset gray; + padding-left:4px; + padding-top:4px; + padding-right:0px; + padding-bottom:0px; + +} + +button[type="roll"].sheet-btn:active { + border: 2px solid black; +} + +button[type="roll"].sheet-btn label, +button[type="roll"].sheet-btn input { + height:24px; + line-height: 24px; + font-size: 1em; + vertical-align: middle; + text-align:center; + width: 99%; + cursor: pointer; + background: none; + box-shadow: none; + transition: none; + border-radius: none; + border:none; + font-weight:700; +} + +button[type="roll"].sheet-physstat , +button[type="roll"]label.sheet-physstat , +button[type="roll"]input.sheet-physstat { + color: blue; + border: 2px solid blue; +} + +button[type="roll"].sheet-physstat :hover, +button[type="roll"].sheet-physstat :hover label, +button[type="roll"].sheet-physstat :hover input { + color: blue; + border: 2px inset blue; +} + +.sheet-aglstat button[type="roll"], +.sheet-aglstat button[type="roll"]label, +.sheet-aglstat button[type="roll"]input { + color: red; + border: 2px solid transparent; +} + +.sheet-aglstat button[type="roll"]:hover, +.sheet-aglstat button[type="roll"]:hover label, +.sheet-aglstat button[type="roll"]:hover input { + color: red; + border: 2px inset red; +} + +.sheet-intstat button[type="roll"], +.sheet-intstat button[type="roll"] label, +.sheet-intstat button[type="roll"] input { + color: green; + border: 2px outset gray; +} + +.sheet-intstat button[type="roll"]:hover, +.sheet-intstat button[type="roll"]:hover label, +.sheet-intstat button[type="roll"]:hover input { + color: green; + border: 2px inset green; +} +.sheet-general { + font-style:italic; + color:silver; +} /*========== Virtuoso ==========*/ /*-----virtioso colouring----*/ div.sheet-virtioso { @@ -1325,120 +1629,6 @@ button[type="roll"].sheet-combatstatic_button:before { .sheet-combatstatic_button:active { background: radial-gradient(circle at 8px 8px, orange, red); } -/*==========Button Reset==========*/ -/*================================*/ -/*================================*/ -.sheet-wrapper button[type="roll"]:before { - content: ""!important; - display: none; -} -.sheet-wrapper button[type="roll"], -.sheet-wrapper .sheet-roll { - width: 100%; - height:24px; - vertical-align: middle; - display: inline-block; - margin: 0; - font-weight: 700; - text-align: left; - vertical-align: middle; - cursor: pointer; - background-image: none; - border-radius:5px; - - background-color: transparent; - border: 2px outset gray; - border-style: outset; - padding: 2px; - padding-left:2px; - font-size: 1em; - color: white; - text-shadow: 0px 0px 0.2em #6C3306; - - white-space: nowrap; - -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; -} - -.sheet-wrapper button[type="roll"]:hover { - border: 2px inset gray; - padding-left:4px; - padding-top:4px; - padding-right:0px; - padding-bottom:0px; - -} - -.sheet-wrapper button[type="roll"]:active { - border: 2px solid black; - -} - -.sheet-wrapper button[type="roll"] label, -.sheet-wrapper button[type="roll"] input { - height:24px; - line-height: 24px; - font-size: 1em; - vertical-align: middle; - text-align:center; - width: 99%; - cursor: pointer; - background: none; - box-shadow: none; - transition: none; - border-radius: none; - border:none; - font-weight:700; - -} - -.sheet-wrapper .sheet-physstat button[type="roll"], -.sheet-wrapper .sheet-physstat button[type="roll"]label, -.sheet-wrapper .sheet-physstat button[type="roll"]input { - color: blue; - border: 2px solid blue; -} - -.sheet-wrapper .sheet-physstat button[type="roll"]:hover, -.sheet-wrapper .sheet-physstat button[type="roll"]:hover label, -.sheet-wrapper .sheet-physstat button[type="roll"]:hover input { - color: blue; - border: 2px inset blue; -} - -.sheet-wrapper .sheet-aglstat button[type="roll"], -.sheet-wrapper .sheet-aglstat button[type="roll"]label, -.sheet-wrapper .sheet-aglstat button[type="roll"]input { - color: red; - border: 2px solid transparent; -} - -.sheet-wrapper .sheet-aglstat button[type="roll"]:hover, -.sheet-wrapper .sheet-aglstat button[type="roll"]:hover label, -.sheet-wrapper .sheet-aglstat button[type="roll"]:hover input { - color: red; - border: 2px inset red; -} - -.sheet-wrapper .sheet-intstat button[type="roll"], -.sheet-wrapper .sheet-intstat button[type="roll"] label, -.sheet-wrapper .sheet-intstat button[type="roll"] input { - color: green; - border: 2px outset gray; -} - -.sheet-wrapper .sheet-intstat button[type="roll"]:hover, -.sheet-wrapper .sheet-intstat button[type="roll"]:hover label, -.sheet-wrapper .sheet-intstat button[type="roll"]:hover input { - color: green; - border: 2px inset green; -} - /* ================Tooltips ================ */ button[type="roll"].sheet-skill_button:before { content: ""!important; @@ -1452,7 +1642,7 @@ button[type="roll"].sheet-skill_button:before { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; - + text-shadow: none; background: radial-gradient(circle at 8px 8px, white, black 50%); box-shadow: 0px 0px 2px white; @@ -1466,6 +1656,188 @@ button[type="roll"].sheet-skill_button:before { background: radial-gradient(circle at 8px 8px, silver, black 50%); } +/*-----sheet-normal radio boxes-----*/ + /* -----Hide actual radio----- */ +input.sheet-normal[type="radio"] +{ + opacity: 0; + width: 16px; + height: 16px; + position: relative; + top: 5px; + left: 6px; + margin: -10px; + cursor: pointer; + z-index: 1; +} + + /* -----Fake radio----- */ +input.sheet-normal[type="radio"] + span::before +{ + margin-right: 2px; + border: solid 1px #a8a8a8; + line-height: 16px; + text-align: center; + display: inline-block; + vertical-align: middle; + + border:none; + -moz-box-shadow: 0 0 2px #ccc; + -webkit-box-shadow: 0 0 2px #ccc; + box-shadow: 0 0 2px #ccc; + + background:green; + + content: ""; + width: 16px; + height: 16px; + font-size: 3em; + + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; +} + + /* -----Remove dot from all radios _after_ selected one----- */ +input.sheet-normal[type="radio"]:checked ~ input.sheet-normal[type="radio"] + span::before +{ + content: ""; + + background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%, rgba(255,255,192,0.65) 9%, rgba(255,255,192,0.65) 39%, rgba(255,255,192,0) 100%); /* FF3.6+ */ + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,192,0.65)), color-stop(9%,rgba(255,255,192,0.65)), color-stop(39%,rgba(255,255,192,0.65)), color-stop(100%,rgba(255,255,192,0))); /* Chrome,Safari4+ */ + background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* Opera 12+ */ + background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* IE10+ */ + background: radial-gradient(ellipse at center, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6ffffc0', endColorstr='#00ffffc0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + +} + + /*------------empty traits-----------*/ +input.sheet-zero[type="radio"]:checked + span::before +{ + opacity: 0; +} + +input.sheet-zero[type="radio"]:hover + span::before +{ + opacity: 1; +} + +input.sheet-zero[type="radio"] + span::before +{ + color:black; + font-size: 1em; + content: "✖"; + opacity: 0.25; +} +/*-----sheet-grate radio boxes-----*/ + /* -----Hide actual radio----- */ +input.sheet-grate[type="radio"] +{ + opacity: 0; + width: 16px; + height: 16px; + position: relative; + top: 5px; + left: 6px; + margin: -10px; + cursor: pointer; + z-index: 1; +} + + /* -----Fake radio----- */ +input.sheet-grate[type="radio"] + span::before +{ + margin-right: 2px; + border: solid 1px #a8a8a8; + line-height: 12px; + text-align: center; + display: inline-block; + vertical-align: middle; + + border:none; + -moz-box-shadow: 0 0 2px #ccc; + -webkit-box-shadow: 0 0 2px #ccc; + box-shadow: 0 0 2px #ccc; + + background: #e5d6ab;; + + content: ""; + width: 12px; + height: 12px; + font-size: 1em; + + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; +} +input.sheet-grate[type="radio"]:checked + span::before { + content: "✓"; + color:green; +} +input.sheet-x[type="radio"] + span::before +{ + content: ""; +} +input.sheet-x[type="radio"]:checked + span::before +{ + content: "x"; + color:red; +} +/* -----Sheet-use radio----- */ +/* -----Hide actual radio----- */ +input.sheet-use[type="radio"] +{ + opacity: 0; + width: 16px; + height: 16px; + position: relative; + top: 5px; + left: 6px; + margin: -10px; + cursor: pointer; + z-index: 1; +} + +/* -----Fake radio----- */ +input.sheet-use[type="radio"] + span::before { + margin-right: 2px; + border: solid 1px #a8a8a8; + line-height: 16px; + text-align: center; + display: inline-block; + vertical-align: middle; + + border:none; + -moz-box-shadow: 0 0 2px #ccc; + -webkit-box-shadow: 0 0 2px #ccc; + box-shadow: 0 0 2px #ccc; + + content: ""; + + background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%, rgba(255,255,192,0.65) 9%, rgba(255,255,192,0.65) 39%, rgba(255,255,192,0) 100%); /* FF3.6+ */ + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,192,0.65)), color-stop(9%,rgba(255,255,192,0.65)), color-stop(39%,rgba(255,255,192,0.65)), color-stop(100%,rgba(255,255,192,0))); /* Chrome,Safari4+ */ + background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* Chrome10+,Safari5.1+ */ + background: -o-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* Opera 12+ */ + background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* IE10+ */ + background: radial-gradient(ellipse at center, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6ffffc0', endColorstr='#00ffffc0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ + + width: 16px; + height: 16px; + font-size: 1em; + + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; +} +input.sheet-use[type="radio"]:checked + span::before { + color: red; + content: "✓"; + text-shadow:none; + font-weight:bold; +} /* ================Tooltips ================ */ .sheet-tooltips { @@ -1570,84 +1942,6 @@ button[type="roll"].sheet-skill_button:before { z-index: 999; } -/*-----radio boxes-----*/ - -/* -----Hide actual radio----- */ -input.sheet-normal[type="radio"] -{ - opacity: 0; - width: 16px; - height: 16px; - position: relative; - top: 5px; - left: 6px; - margin: -10px; - cursor: pointer; - z-index: 1; -} - -/* -----Fake radio----- */ -input.sheet-normal[type="radio"] + span::before -{ - margin-right: 2px; - border: solid 1px #a8a8a8; - line-height: 16px; - text-align: center; - display: inline-block; - vertical-align: middle; - - border:none; - -moz-box-shadow: 0 0 2px #ccc; - -webkit-box-shadow: 0 0 2px #ccc; - box-shadow: 0 0 2px #ccc; - - background:green; - - content: ""; - width: 16px; - height: 16px; - font-size: 3em; - - -moz-border-radius: 50%; - -webkit-border-radius: 50%; - border-radius: 50%; -} - -/* -----Remove dot from all radios _after_ selected one----- */ -input.sheet-normal[type="radio"]:checked ~ input.sheet-normal[type="radio"] + span::before -{ - content: ""; - - background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%, rgba(255,255,192,0.65) 9%, rgba(255,255,192,0.65) 39%, rgba(255,255,192,0) 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,192,0.65)), color-stop(9%,rgba(255,255,192,0.65)), color-stop(39%,rgba(255,255,192,0.65)), color-stop(100%,rgba(255,255,192,0))); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* Opera 12+ */ - background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* IE10+ */ - background: radial-gradient(ellipse at center, rgba(255,255,192,0.65) 0%,rgba(255,255,192,0.65) 9%,rgba(255,255,192,0.65) 39%,rgba(255,255,192,0) 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6ffffc0', endColorstr='#00ffffc0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ - -} - -/*------------empty traits-----------*/ -input.sheet-zero[type="radio"]:checked + span::before -{ - opacity: 0; -} - -input.sheet-zero[type="radio"]:hover + span::before -{ - opacity: 1; -} - -input.sheet-zero[type="radio"] + span::before -{ - color:black; - font-size: 1em; - content: "✖"; - opacity: 0.25; -} - - /*=== Roll Templates ===*/ /*======================*/ /*======================*/ @@ -1686,15 +1980,15 @@ input.sheet-zero[type="radio"] + span::before display: inline-block; min-width: 1.5em; text-align: center; - border: 2px solid rgba(167, 168, 170,1); /*Cool Gray 6 C*/ + border: 2px solid rgba(167, 168, 170,1); /*Cool Gray 6 C*/ } .sheet-rolltemplate-weapon .inlinerollresult.fullfail { - border: 2px solid #B31515; + border: 2px solid #B31515; } .sheet-rolltemplate-weapon .inlinerollresult.importantroll { - border: 2px solid #4A57ED; + border: 2px solid #4A57ED; } /*=== Roll Templates ===*/ /*=== artillary ===*/ @@ -1711,7 +2005,7 @@ input.sheet-zero[type="radio"] + span::before .sheet-rolltemplate-boom th { background: url ('http://th06.deviantart.net/fs70/PRE/i/2011/132/5/6/smoke_texture5_by_ashensorrow-d3g74bf.jpg'); background-size: 100%; - color: red; + color: red; padding: 2px; border-bottom: 1px solid black; line-height: 1.6em; @@ -1927,7 +2221,6 @@ input.sheet-zero[type="radio"] + span::before border-collapse: collapse; } - .sheet-rolltemplate-ability td { padding: 5px; border-left: 1px solid black; @@ -1936,6 +2229,49 @@ input.sheet-zero[type="radio"] + span::before .sheet-rolltemplate-ability tr:last-child { border-bottom: 1px solid black; +} + /*=== Roll Templates ===*/ + /*=== skill ===*/ + +.sheet-rolltemplate-skill table { + width: 100%; + border: none; + border-radius:15px; + background: url ('http://fc06.deviantart.net/fs40/i/2009/004/8/4/dirty_parchment_by_swimmingintheether.jpg'); + box-shadow: -5px -5px 5px black; +} + +.sheet-rolltemplate-skill td { + padding: 5px; + border: none; + color: black; + font-family: "Shadows Into Light", cursive; + font-size: 1em; + font-weight: bold; + letter-spacing: 1px; +} + +.sheet-rolltemplate-skill .inlinerollresult, +.sheet-rolltemplate-skill .inlinerollresult.fullcrit, +.sheet-rolltemplate-skill .inlinerollresult.fullfail, +.sheet-rolltemplate-skill .inlinerollresult.importantroll { + border:none; + background:transparent; + font-weight: bold; + color:black; + text-align:center; + letter-spacing: 2px; + margin-left:5px; +} +.sheet-rolltemplate-skill .sheet-skill_number { + border:1px solid black; + border-radius:15px; + background:white; + font-weight: bold; + color:black; + width:50px; + display:inline; + text-align:center; } /*=== Roll Templates ===*/ /*=== jackmelee ===*/ @@ -2159,6 +2495,3 @@ input.sheet-zero[type="radio"] + span::before text-shadow: 0px 0px 2px black; } - - -