From 7a89c576a2f752ad121b56eb97d3b6d6c14aeda9 Mon Sep 17 00:00:00 2001 From: Casey Link Date: Fri, 30 May 2014 11:46:06 +0200 Subject: [PATCH] firefly: prettify the checkboxes and radio butons --- Firefly/dropdowns-repeat.less | 18 +- Firefly/dropdowns.less | 15 +- Firefly/firefly.css | 486 ++++++++++++++++++++++++++-------- Firefly/firefly.html | 95 ++++--- Firefly/mixins.less | 70 +++++ Firefly/styles.less | 12 +- 6 files changed, 518 insertions(+), 178 deletions(-) diff --git a/Firefly/dropdowns-repeat.less b/Firefly/dropdowns-repeat.less index a35fc47d28..6f8b7dcba0 100644 --- a/Firefly/dropdowns-repeat.less +++ b/Firefly/dropdowns-repeat.less @@ -26,14 +26,14 @@ based off of http://jsfiddle.net/A664f/4/ } input[name="@{rpt}"], - input[name="@{rpt}"] + label - { + input[name="@{rpt}"] + span, + input[name="@{rpt}"] + span + label { display: none; } input[name="@{rpt}"], - input[name="@{rpt}"] + label - { + input[name="@{rpt}"] + span, + input[name="@{rpt}"] + span + label { z-index: 1; } @@ -47,20 +47,22 @@ based off of http://jsfiddle.net/A664f/4/ input[name="@{rpt}"] { display:inline; - & + label { + & + span, + & + span + label { display:inline; } } input[name="@{rpt}"]:checked { display:inline; - & + label { + & + span, + & + span + label { display:inline; } } } input[name="@{rpt}"]:checked, - input[name="@{rpt}"]:checked + label - { + input[name="@{rpt}"]:checked + span, + input[name="@{rpt}"]:checked + span + label { display: none; } diff --git a/Firefly/dropdowns.less b/Firefly/dropdowns.less index f5dc27e627..fb3a7bd12d 100644 --- a/Firefly/dropdowns.less +++ b/Firefly/dropdowns.less @@ -29,14 +29,14 @@ based off of http://jsfiddle.net/A664f/4/ } input[name="@{str}"], - input[name="@{str}"] + label - { + input[name="@{str}"] + span, + input[name="@{str}"] + span + label { display: none; } input[name="@{str}"], - input[name="@{str}"] + label - { + input[name="@{str}"] + span, + input[name="@{str}"] + span + label { z-index: 1; } @@ -50,18 +50,21 @@ based off of http://jsfiddle.net/A664f/4/ input[name="@{str}"] { display:inline; - & + label { + & + span, + & + span + label { display:inline; } } input[name="@{str}"]:checked { display:inline; - & + label { + & + span, + & + span + label { display:inline; } } } input[name="@{str}"]:checked, + input[name="@{str}"]:checked + span + label, input[name="@{str}"]:checked + label { display: none; diff --git a/Firefly/firefly.css b/Firefly/firefly.css index 5bd131bf19..3990d74119 100644 --- a/Firefly/firefly.css +++ b/Firefly/firefly.css @@ -43,6 +43,7 @@ 100% { opacity: 1; } } */ +/** apply to input[type=radio/checkbox] */ /** CSS only dropdowns based off of http://jsfiddle.net/A664f/4/ @@ -349,6 +350,75 @@ fieldset[disabled] .sheet-page .sheet-section button[type=roll].active { background: transparent; max-width: 100%; } +.sheet-page .sheet-section input[type=checkbox], +.sheet-page .sheet-section input[type=radio] { + /* Hide actual radio/checkbox */ + opacity: 0; + width: 16px; + height: 16px; + position: relative; + top: 5px; + left: 6px; + margin: -10px; + cursor: pointer; + z-index: 1; +} +.sheet-page .sheet-section input[type=checkbox] + span:before, +.sheet-page .sheet-section input[type=radio] + span:before { + /* Fake radio/checkbox */ + margin-right: 4px; + 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; + 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); +} +.sheet-page .sheet-section input[type=checkbox] + span::before { + content: ""; + width: 14px; + height: 14px; + font-size: 12px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + background-position: -1px -1px; + width: 15px; + height: 15px; + background-image: url("https://i.imgur.com/zkgyBOi.png"); + background-repeat: no-repeat; + vertical-align: middle; + color: transparent; + display: inline-block; +} +.sheet-page .sheet-section input[type=checkbox]:checked + span::before { + background-position: -18px -1px; + width: 15px; + height: 15px; + background-image: url("https://i.imgur.com/zkgyBOi.png"); + background-repeat: no-repeat; + display: inline-block; +} +.sheet-page .sheet-section input[type=radio] + span::before { + content: ""; + width: 12px; + height: 12px; + font-size: 24px; + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; +} +.sheet-page .sheet-section input[type=radio]:checked + span::before { + content: "•"; +} /* Section: Header */ .sheet-pagehead { margin: 22px auto 30px auto; @@ -602,16 +672,6 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti width: 90%; margin: 0; } -.sheet-sigassets .sheet-ul .sheet-li input[type=checkbox], -.sheet-distinctions .sheet-ul .sheet-li input[type=checkbox], -.sheet-sigassets ul .sheet-li input[type=checkbox], -.sheet-distinctions ul .sheet-li input[type=checkbox], -.sheet-sigassets .sheet-ul li input[type=checkbox], -.sheet-distinctions .sheet-ul li input[type=checkbox], -.sheet-sigassets ul li input[type=checkbox], -.sheet-distinctions ul li input[type=checkbox] { - margin-right: 5px; -} /* Section: Distinctions */ .sheet-distinctions > input[type=text].sheet-lore { width: 100%; @@ -721,11 +781,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Mental"], -.sheet-dropdown input[name="attr_Mental"] + label { +.sheet-dropdown input[name="attr_Mental"] + span, +.sheet-dropdown input[name="attr_Mental"] + span + label { display: none; } .sheet-dropdown input[name="attr_Mental"], -.sheet-dropdown input[name="attr_Mental"] + label { +.sheet-dropdown input[name="attr_Mental"] + span, +.sheet-dropdown input[name="attr_Mental"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Mental:hover { @@ -758,16 +820,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Mental:hover input[name="attr_Mental"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Mental:hover input[name="attr_Mental"] + label { +.sheet-dropdown .sheet-drop-attr_Mental:hover input[name="attr_Mental"] + span, +.sheet-dropdown .sheet-drop-attr_Mental:hover input[name="attr_Mental"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Mental:hover input[name="attr_Mental"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Mental:hover input[name="attr_Mental"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Mental:hover input[name="attr_Mental"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Mental:hover input[name="attr_Mental"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Mental"]:checked, +.sheet-dropdown input[name="attr_Mental"]:checked + span + label, .sheet-dropdown input[name="attr_Mental"]:checked + label { display: none; } @@ -807,11 +872,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Physical"], -.sheet-dropdown input[name="attr_Physical"] + label { +.sheet-dropdown input[name="attr_Physical"] + span, +.sheet-dropdown input[name="attr_Physical"] + span + label { display: none; } .sheet-dropdown input[name="attr_Physical"], -.sheet-dropdown input[name="attr_Physical"] + label { +.sheet-dropdown input[name="attr_Physical"] + span, +.sheet-dropdown input[name="attr_Physical"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Physical:hover { @@ -844,16 +911,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Physical:hover input[name="attr_Physical"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Physical:hover input[name="attr_Physical"] + label { +.sheet-dropdown .sheet-drop-attr_Physical:hover input[name="attr_Physical"] + span, +.sheet-dropdown .sheet-drop-attr_Physical:hover input[name="attr_Physical"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Physical:hover input[name="attr_Physical"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Physical:hover input[name="attr_Physical"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Physical:hover input[name="attr_Physical"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Physical:hover input[name="attr_Physical"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Physical"]:checked, +.sheet-dropdown input[name="attr_Physical"]:checked + span + label, .sheet-dropdown input[name="attr_Physical"]:checked + label { display: none; } @@ -893,11 +963,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Social"], -.sheet-dropdown input[name="attr_Social"] + label { +.sheet-dropdown input[name="attr_Social"] + span, +.sheet-dropdown input[name="attr_Social"] + span + label { display: none; } .sheet-dropdown input[name="attr_Social"], -.sheet-dropdown input[name="attr_Social"] + label { +.sheet-dropdown input[name="attr_Social"] + span, +.sheet-dropdown input[name="attr_Social"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Social:hover { @@ -930,16 +1002,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Social:hover input[name="attr_Social"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Social:hover input[name="attr_Social"] + label { +.sheet-dropdown .sheet-drop-attr_Social:hover input[name="attr_Social"] + span, +.sheet-dropdown .sheet-drop-attr_Social:hover input[name="attr_Social"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Social:hover input[name="attr_Social"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Social:hover input[name="attr_Social"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Social:hover input[name="attr_Social"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Social:hover input[name="attr_Social"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Social"]:checked, +.sheet-dropdown input[name="attr_Social"]:checked + span + label, .sheet-dropdown input[name="attr_Social"]:checked + label { display: none; } @@ -979,11 +1054,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Craft"], -.sheet-dropdown input[name="attr_Craft"] + label { +.sheet-dropdown input[name="attr_Craft"] + span, +.sheet-dropdown input[name="attr_Craft"] + span + label { display: none; } .sheet-dropdown input[name="attr_Craft"], -.sheet-dropdown input[name="attr_Craft"] + label { +.sheet-dropdown input[name="attr_Craft"] + span, +.sheet-dropdown input[name="attr_Craft"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Craft:hover { @@ -1016,16 +1093,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Craft:hover input[name="attr_Craft"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Craft:hover input[name="attr_Craft"] + label { +.sheet-dropdown .sheet-drop-attr_Craft:hover input[name="attr_Craft"] + span, +.sheet-dropdown .sheet-drop-attr_Craft:hover input[name="attr_Craft"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Craft:hover input[name="attr_Craft"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Craft:hover input[name="attr_Craft"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Craft:hover input[name="attr_Craft"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Craft:hover input[name="attr_Craft"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Craft"]:checked, +.sheet-dropdown input[name="attr_Craft"]:checked + span + label, .sheet-dropdown input[name="attr_Craft"]:checked + label { display: none; } @@ -1065,11 +1145,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Drive"], -.sheet-dropdown input[name="attr_Drive"] + label { +.sheet-dropdown input[name="attr_Drive"] + span, +.sheet-dropdown input[name="attr_Drive"] + span + label { display: none; } .sheet-dropdown input[name="attr_Drive"], -.sheet-dropdown input[name="attr_Drive"] + label { +.sheet-dropdown input[name="attr_Drive"] + span, +.sheet-dropdown input[name="attr_Drive"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Drive:hover { @@ -1102,16 +1184,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Drive:hover input[name="attr_Drive"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Drive:hover input[name="attr_Drive"] + label { +.sheet-dropdown .sheet-drop-attr_Drive:hover input[name="attr_Drive"] + span, +.sheet-dropdown .sheet-drop-attr_Drive:hover input[name="attr_Drive"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Drive:hover input[name="attr_Drive"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Drive:hover input[name="attr_Drive"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Drive:hover input[name="attr_Drive"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Drive:hover input[name="attr_Drive"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Drive"]:checked, +.sheet-dropdown input[name="attr_Drive"]:checked + span + label, .sheet-dropdown input[name="attr_Drive"]:checked + label { display: none; } @@ -1151,11 +1236,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Fight"], -.sheet-dropdown input[name="attr_Fight"] + label { +.sheet-dropdown input[name="attr_Fight"] + span, +.sheet-dropdown input[name="attr_Fight"] + span + label { display: none; } .sheet-dropdown input[name="attr_Fight"], -.sheet-dropdown input[name="attr_Fight"] + label { +.sheet-dropdown input[name="attr_Fight"] + span, +.sheet-dropdown input[name="attr_Fight"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Fight:hover { @@ -1188,16 +1275,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Fight:hover input[name="attr_Fight"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Fight:hover input[name="attr_Fight"] + label { +.sheet-dropdown .sheet-drop-attr_Fight:hover input[name="attr_Fight"] + span, +.sheet-dropdown .sheet-drop-attr_Fight:hover input[name="attr_Fight"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Fight:hover input[name="attr_Fight"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Fight:hover input[name="attr_Fight"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Fight:hover input[name="attr_Fight"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Fight:hover input[name="attr_Fight"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Fight"]:checked, +.sheet-dropdown input[name="attr_Fight"]:checked + span + label, .sheet-dropdown input[name="attr_Fight"]:checked + label { display: none; } @@ -1237,11 +1327,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Fix"], -.sheet-dropdown input[name="attr_Fix"] + label { +.sheet-dropdown input[name="attr_Fix"] + span, +.sheet-dropdown input[name="attr_Fix"] + span + label { display: none; } .sheet-dropdown input[name="attr_Fix"], -.sheet-dropdown input[name="attr_Fix"] + label { +.sheet-dropdown input[name="attr_Fix"] + span, +.sheet-dropdown input[name="attr_Fix"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Fix:hover { @@ -1274,16 +1366,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Fix:hover input[name="attr_Fix"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Fix:hover input[name="attr_Fix"] + label { +.sheet-dropdown .sheet-drop-attr_Fix:hover input[name="attr_Fix"] + span, +.sheet-dropdown .sheet-drop-attr_Fix:hover input[name="attr_Fix"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Fix:hover input[name="attr_Fix"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Fix:hover input[name="attr_Fix"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Fix:hover input[name="attr_Fix"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Fix:hover input[name="attr_Fix"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Fix"]:checked, +.sheet-dropdown input[name="attr_Fix"]:checked + span + label, .sheet-dropdown input[name="attr_Fix"]:checked + label { display: none; } @@ -1323,11 +1418,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Fly"], -.sheet-dropdown input[name="attr_Fly"] + label { +.sheet-dropdown input[name="attr_Fly"] + span, +.sheet-dropdown input[name="attr_Fly"] + span + label { display: none; } .sheet-dropdown input[name="attr_Fly"], -.sheet-dropdown input[name="attr_Fly"] + label { +.sheet-dropdown input[name="attr_Fly"] + span, +.sheet-dropdown input[name="attr_Fly"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Fly:hover { @@ -1360,16 +1457,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Fly:hover input[name="attr_Fly"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Fly:hover input[name="attr_Fly"] + label { +.sheet-dropdown .sheet-drop-attr_Fly:hover input[name="attr_Fly"] + span, +.sheet-dropdown .sheet-drop-attr_Fly:hover input[name="attr_Fly"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Fly:hover input[name="attr_Fly"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Fly:hover input[name="attr_Fly"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Fly:hover input[name="attr_Fly"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Fly:hover input[name="attr_Fly"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Fly"]:checked, +.sheet-dropdown input[name="attr_Fly"]:checked + span + label, .sheet-dropdown input[name="attr_Fly"]:checked + label { display: none; } @@ -1409,11 +1509,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Focus"], -.sheet-dropdown input[name="attr_Focus"] + label { +.sheet-dropdown input[name="attr_Focus"] + span, +.sheet-dropdown input[name="attr_Focus"] + span + label { display: none; } .sheet-dropdown input[name="attr_Focus"], -.sheet-dropdown input[name="attr_Focus"] + label { +.sheet-dropdown input[name="attr_Focus"] + span, +.sheet-dropdown input[name="attr_Focus"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Focus:hover { @@ -1446,16 +1548,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Focus:hover input[name="attr_Focus"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Focus:hover input[name="attr_Focus"] + label { +.sheet-dropdown .sheet-drop-attr_Focus:hover input[name="attr_Focus"] + span, +.sheet-dropdown .sheet-drop-attr_Focus:hover input[name="attr_Focus"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Focus:hover input[name="attr_Focus"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Focus:hover input[name="attr_Focus"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Focus:hover input[name="attr_Focus"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Focus:hover input[name="attr_Focus"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Focus"]:checked, +.sheet-dropdown input[name="attr_Focus"]:checked + span + label, .sheet-dropdown input[name="attr_Focus"]:checked + label { display: none; } @@ -1495,11 +1600,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Influence"], -.sheet-dropdown input[name="attr_Influence"] + label { +.sheet-dropdown input[name="attr_Influence"] + span, +.sheet-dropdown input[name="attr_Influence"] + span + label { display: none; } .sheet-dropdown input[name="attr_Influence"], -.sheet-dropdown input[name="attr_Influence"] + label { +.sheet-dropdown input[name="attr_Influence"] + span, +.sheet-dropdown input[name="attr_Influence"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Influence:hover { @@ -1532,16 +1639,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Influence:hover input[name="attr_Influence"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Influence:hover input[name="attr_Influence"] + label { +.sheet-dropdown .sheet-drop-attr_Influence:hover input[name="attr_Influence"] + span, +.sheet-dropdown .sheet-drop-attr_Influence:hover input[name="attr_Influence"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Influence:hover input[name="attr_Influence"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Influence:hover input[name="attr_Influence"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Influence:hover input[name="attr_Influence"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Influence:hover input[name="attr_Influence"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Influence"]:checked, +.sheet-dropdown input[name="attr_Influence"]:checked + span + label, .sheet-dropdown input[name="attr_Influence"]:checked + label { display: none; } @@ -1581,11 +1691,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Know"], -.sheet-dropdown input[name="attr_Know"] + label { +.sheet-dropdown input[name="attr_Know"] + span, +.sheet-dropdown input[name="attr_Know"] + span + label { display: none; } .sheet-dropdown input[name="attr_Know"], -.sheet-dropdown input[name="attr_Know"] + label { +.sheet-dropdown input[name="attr_Know"] + span, +.sheet-dropdown input[name="attr_Know"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Know:hover { @@ -1618,16 +1730,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Know:hover input[name="attr_Know"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Know:hover input[name="attr_Know"] + label { +.sheet-dropdown .sheet-drop-attr_Know:hover input[name="attr_Know"] + span, +.sheet-dropdown .sheet-drop-attr_Know:hover input[name="attr_Know"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Know:hover input[name="attr_Know"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Know:hover input[name="attr_Know"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Know:hover input[name="attr_Know"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Know:hover input[name="attr_Know"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Know"]:checked, +.sheet-dropdown input[name="attr_Know"]:checked + span + label, .sheet-dropdown input[name="attr_Know"]:checked + label { display: none; } @@ -1667,11 +1782,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Labor"], -.sheet-dropdown input[name="attr_Labor"] + label { +.sheet-dropdown input[name="attr_Labor"] + span, +.sheet-dropdown input[name="attr_Labor"] + span + label { display: none; } .sheet-dropdown input[name="attr_Labor"], -.sheet-dropdown input[name="attr_Labor"] + label { +.sheet-dropdown input[name="attr_Labor"] + span, +.sheet-dropdown input[name="attr_Labor"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Labor:hover { @@ -1704,16 +1821,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Labor:hover input[name="attr_Labor"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Labor:hover input[name="attr_Labor"] + label { +.sheet-dropdown .sheet-drop-attr_Labor:hover input[name="attr_Labor"] + span, +.sheet-dropdown .sheet-drop-attr_Labor:hover input[name="attr_Labor"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Labor:hover input[name="attr_Labor"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Labor:hover input[name="attr_Labor"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Labor:hover input[name="attr_Labor"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Labor:hover input[name="attr_Labor"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Labor"]:checked, +.sheet-dropdown input[name="attr_Labor"]:checked + span + label, .sheet-dropdown input[name="attr_Labor"]:checked + label { display: none; } @@ -1753,11 +1873,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Move"], -.sheet-dropdown input[name="attr_Move"] + label { +.sheet-dropdown input[name="attr_Move"] + span, +.sheet-dropdown input[name="attr_Move"] + span + label { display: none; } .sheet-dropdown input[name="attr_Move"], -.sheet-dropdown input[name="attr_Move"] + label { +.sheet-dropdown input[name="attr_Move"] + span, +.sheet-dropdown input[name="attr_Move"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Move:hover { @@ -1790,16 +1912,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Move:hover input[name="attr_Move"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Move:hover input[name="attr_Move"] + label { +.sheet-dropdown .sheet-drop-attr_Move:hover input[name="attr_Move"] + span, +.sheet-dropdown .sheet-drop-attr_Move:hover input[name="attr_Move"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Move:hover input[name="attr_Move"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Move:hover input[name="attr_Move"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Move:hover input[name="attr_Move"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Move:hover input[name="attr_Move"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Move"]:checked, +.sheet-dropdown input[name="attr_Move"]:checked + span + label, .sheet-dropdown input[name="attr_Move"]:checked + label { display: none; } @@ -1839,11 +1964,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Notice"], -.sheet-dropdown input[name="attr_Notice"] + label { +.sheet-dropdown input[name="attr_Notice"] + span, +.sheet-dropdown input[name="attr_Notice"] + span + label { display: none; } .sheet-dropdown input[name="attr_Notice"], -.sheet-dropdown input[name="attr_Notice"] + label { +.sheet-dropdown input[name="attr_Notice"] + span, +.sheet-dropdown input[name="attr_Notice"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Notice:hover { @@ -1876,16 +2003,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Notice:hover input[name="attr_Notice"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Notice:hover input[name="attr_Notice"] + label { +.sheet-dropdown .sheet-drop-attr_Notice:hover input[name="attr_Notice"] + span, +.sheet-dropdown .sheet-drop-attr_Notice:hover input[name="attr_Notice"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Notice:hover input[name="attr_Notice"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Notice:hover input[name="attr_Notice"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Notice:hover input[name="attr_Notice"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Notice:hover input[name="attr_Notice"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Notice"]:checked, +.sheet-dropdown input[name="attr_Notice"]:checked + span + label, .sheet-dropdown input[name="attr_Notice"]:checked + label { display: none; } @@ -1925,11 +2055,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Operate"], -.sheet-dropdown input[name="attr_Operate"] + label { +.sheet-dropdown input[name="attr_Operate"] + span, +.sheet-dropdown input[name="attr_Operate"] + span + label { display: none; } .sheet-dropdown input[name="attr_Operate"], -.sheet-dropdown input[name="attr_Operate"] + label { +.sheet-dropdown input[name="attr_Operate"] + span, +.sheet-dropdown input[name="attr_Operate"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Operate:hover { @@ -1962,16 +2094,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Operate:hover input[name="attr_Operate"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Operate:hover input[name="attr_Operate"] + label { +.sheet-dropdown .sheet-drop-attr_Operate:hover input[name="attr_Operate"] + span, +.sheet-dropdown .sheet-drop-attr_Operate:hover input[name="attr_Operate"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Operate:hover input[name="attr_Operate"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Operate:hover input[name="attr_Operate"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Operate:hover input[name="attr_Operate"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Operate:hover input[name="attr_Operate"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Operate"]:checked, +.sheet-dropdown input[name="attr_Operate"]:checked + span + label, .sheet-dropdown input[name="attr_Operate"]:checked + label { display: none; } @@ -2011,11 +2146,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Perform"], -.sheet-dropdown input[name="attr_Perform"] + label { +.sheet-dropdown input[name="attr_Perform"] + span, +.sheet-dropdown input[name="attr_Perform"] + span + label { display: none; } .sheet-dropdown input[name="attr_Perform"], -.sheet-dropdown input[name="attr_Perform"] + label { +.sheet-dropdown input[name="attr_Perform"] + span, +.sheet-dropdown input[name="attr_Perform"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Perform:hover { @@ -2048,16 +2185,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Perform:hover input[name="attr_Perform"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Perform:hover input[name="attr_Perform"] + label { +.sheet-dropdown .sheet-drop-attr_Perform:hover input[name="attr_Perform"] + span, +.sheet-dropdown .sheet-drop-attr_Perform:hover input[name="attr_Perform"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Perform:hover input[name="attr_Perform"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Perform:hover input[name="attr_Perform"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Perform:hover input[name="attr_Perform"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Perform:hover input[name="attr_Perform"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Perform"]:checked, +.sheet-dropdown input[name="attr_Perform"]:checked + span + label, .sheet-dropdown input[name="attr_Perform"]:checked + label { display: none; } @@ -2097,11 +2237,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Shoot"], -.sheet-dropdown input[name="attr_Shoot"] + label { +.sheet-dropdown input[name="attr_Shoot"] + span, +.sheet-dropdown input[name="attr_Shoot"] + span + label { display: none; } .sheet-dropdown input[name="attr_Shoot"], -.sheet-dropdown input[name="attr_Shoot"] + label { +.sheet-dropdown input[name="attr_Shoot"] + span, +.sheet-dropdown input[name="attr_Shoot"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Shoot:hover { @@ -2134,16 +2276,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Shoot:hover input[name="attr_Shoot"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Shoot:hover input[name="attr_Shoot"] + label { +.sheet-dropdown .sheet-drop-attr_Shoot:hover input[name="attr_Shoot"] + span, +.sheet-dropdown .sheet-drop-attr_Shoot:hover input[name="attr_Shoot"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Shoot:hover input[name="attr_Shoot"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Shoot:hover input[name="attr_Shoot"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Shoot:hover input[name="attr_Shoot"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Shoot:hover input[name="attr_Shoot"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Shoot"]:checked, +.sheet-dropdown input[name="attr_Shoot"]:checked + span + label, .sheet-dropdown input[name="attr_Shoot"]:checked + label { display: none; } @@ -2183,11 +2328,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Sneak"], -.sheet-dropdown input[name="attr_Sneak"] + label { +.sheet-dropdown input[name="attr_Sneak"] + span, +.sheet-dropdown input[name="attr_Sneak"] + span + label { display: none; } .sheet-dropdown input[name="attr_Sneak"], -.sheet-dropdown input[name="attr_Sneak"] + label { +.sheet-dropdown input[name="attr_Sneak"] + span, +.sheet-dropdown input[name="attr_Sneak"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Sneak:hover { @@ -2220,16 +2367,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Sneak:hover input[name="attr_Sneak"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Sneak:hover input[name="attr_Sneak"] + label { +.sheet-dropdown .sheet-drop-attr_Sneak:hover input[name="attr_Sneak"] + span, +.sheet-dropdown .sheet-drop-attr_Sneak:hover input[name="attr_Sneak"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Sneak:hover input[name="attr_Sneak"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Sneak:hover input[name="attr_Sneak"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Sneak:hover input[name="attr_Sneak"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Sneak:hover input[name="attr_Sneak"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Sneak"]:checked, +.sheet-dropdown input[name="attr_Sneak"]:checked + span + label, .sheet-dropdown input[name="attr_Sneak"]:checked + label { display: none; } @@ -2269,11 +2419,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Survive"], -.sheet-dropdown input[name="attr_Survive"] + label { +.sheet-dropdown input[name="attr_Survive"] + span, +.sheet-dropdown input[name="attr_Survive"] + span + label { display: none; } .sheet-dropdown input[name="attr_Survive"], -.sheet-dropdown input[name="attr_Survive"] + label { +.sheet-dropdown input[name="attr_Survive"] + span, +.sheet-dropdown input[name="attr_Survive"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Survive:hover { @@ -2306,16 +2458,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Survive:hover input[name="attr_Survive"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Survive:hover input[name="attr_Survive"] + label { +.sheet-dropdown .sheet-drop-attr_Survive:hover input[name="attr_Survive"] + span, +.sheet-dropdown .sheet-drop-attr_Survive:hover input[name="attr_Survive"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Survive:hover input[name="attr_Survive"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Survive:hover input[name="attr_Survive"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Survive:hover input[name="attr_Survive"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Survive:hover input[name="attr_Survive"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Survive"]:checked, +.sheet-dropdown input[name="attr_Survive"]:checked + span + label, .sheet-dropdown input[name="attr_Survive"]:checked + label { display: none; } @@ -2355,11 +2510,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Throw"], -.sheet-dropdown input[name="attr_Throw"] + label { +.sheet-dropdown input[name="attr_Throw"] + span, +.sheet-dropdown input[name="attr_Throw"] + span + label { display: none; } .sheet-dropdown input[name="attr_Throw"], -.sheet-dropdown input[name="attr_Throw"] + label { +.sheet-dropdown input[name="attr_Throw"] + span, +.sheet-dropdown input[name="attr_Throw"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Throw:hover { @@ -2392,16 +2549,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Throw:hover input[name="attr_Throw"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Throw:hover input[name="attr_Throw"] + label { +.sheet-dropdown .sheet-drop-attr_Throw:hover input[name="attr_Throw"] + span, +.sheet-dropdown .sheet-drop-attr_Throw:hover input[name="attr_Throw"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Throw:hover input[name="attr_Throw"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Throw:hover input[name="attr_Throw"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Throw:hover input[name="attr_Throw"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Throw:hover input[name="attr_Throw"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Throw"]:checked, +.sheet-dropdown input[name="attr_Throw"]:checked + span + label, .sheet-dropdown input[name="attr_Throw"]:checked + label { display: none; } @@ -2441,11 +2601,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Treat"], -.sheet-dropdown input[name="attr_Treat"] + label { +.sheet-dropdown input[name="attr_Treat"] + span, +.sheet-dropdown input[name="attr_Treat"] + span + label { display: none; } .sheet-dropdown input[name="attr_Treat"], -.sheet-dropdown input[name="attr_Treat"] + label { +.sheet-dropdown input[name="attr_Treat"] + span, +.sheet-dropdown input[name="attr_Treat"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Treat:hover { @@ -2478,16 +2640,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Treat:hover input[name="attr_Treat"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Treat:hover input[name="attr_Treat"] + label { +.sheet-dropdown .sheet-drop-attr_Treat:hover input[name="attr_Treat"] + span, +.sheet-dropdown .sheet-drop-attr_Treat:hover input[name="attr_Treat"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Treat:hover input[name="attr_Treat"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Treat:hover input[name="attr_Treat"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Treat:hover input[name="attr_Treat"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Treat:hover input[name="attr_Treat"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Treat"]:checked, +.sheet-dropdown input[name="attr_Treat"]:checked + span + label, .sheet-dropdown input[name="attr_Treat"]:checked + label { display: none; } @@ -2527,11 +2692,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_Trick"], -.sheet-dropdown input[name="attr_Trick"] + label { +.sheet-dropdown input[name="attr_Trick"] + span, +.sheet-dropdown input[name="attr_Trick"] + span + label { display: none; } .sheet-dropdown input[name="attr_Trick"], -.sheet-dropdown input[name="attr_Trick"] + label { +.sheet-dropdown input[name="attr_Trick"] + span, +.sheet-dropdown input[name="attr_Trick"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-attr_Trick:hover { @@ -2564,16 +2731,19 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-attr_Trick:hover input[name="attr_Trick"] { display: inline; } -.sheet-dropdown .sheet-drop-attr_Trick:hover input[name="attr_Trick"] + label { +.sheet-dropdown .sheet-drop-attr_Trick:hover input[name="attr_Trick"] + span, +.sheet-dropdown .sheet-drop-attr_Trick:hover input[name="attr_Trick"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-attr_Trick:hover input[name="attr_Trick"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-attr_Trick:hover input[name="attr_Trick"]:checked + label { +.sheet-dropdown .sheet-drop-attr_Trick:hover input[name="attr_Trick"]:checked + span, +.sheet-dropdown .sheet-drop-attr_Trick:hover input[name="attr_Trick"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_Trick"]:checked, +.sheet-dropdown input[name="attr_Trick"]:checked + span + label, .sheet-dropdown input[name="attr_Trick"]:checked + label { display: none; } @@ -2603,12 +2773,87 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-sigasset .sheet-value-2 { display: none; } -.sheet-dropdown input[name="attr_0_repeating_sigassets_sigasset_value"], -.sheet-dropdown input[name="attr_0_repeating_sigassets_sigasset_value"] + label { +.sheet-dropdown input[name="attr_sigasset_value"], +.sheet-dropdown input[name="attr_sigasset_value"] + span, +.sheet-dropdown input[name="attr_sigasset_value"] + span + label { + display: none; +} +.sheet-dropdown input[name="attr_sigasset_value"], +.sheet-dropdown input[name="attr_sigasset_value"] + span, +.sheet-dropdown input[name="attr_sigasset_value"] + span + label { + z-index: 1; +} +.sheet-dropdown .sheet-drop-sigasset:hover { + position: absolute; + width: 80px; + z-index: 1; + background-color: #a1a8c2; + padding: 5px; +} +.sheet-dropdown .sheet-drop-sigasset:hover:before { + content: ""; + position: absolute; + top: 0px; + left: -7px; + bottom: 0; + border-top: 7px solid transparent; + border-right: 8px solid #a1a8c2; + border-bottom: 7px solid transparent; +} +.sheet-dropdown .sheet-drop-sigasset:hover:after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + right: -7px; + border-top: 7px solid transparent; + border-left: 8px solid #a1a8c2; + border-bottom: 7px solid transparent; +} +.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_sigasset_value"] { + display: inline; +} +.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_sigasset_value"] + span, +.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_sigasset_value"] + span + label { + display: inline; +} +.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_sigasset_value"]:checked { + display: inline; +} +.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_sigasset_value"]:checked + span, +.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_sigasset_value"]:checked + span + label { + display: inline; +} +.sheet-dropdown input[name="attr_sigasset_value"]:checked, +.sheet-dropdown input[name="attr_sigasset_value"]:checked + span, +.sheet-dropdown input[name="attr_sigasset_value"]:checked + span + label { + display: none; +} +.sheet-dropdown .sheet-drop-sigasset:not(:hover) input[name="attr_sigasset_mark"] ~ input[name="attr_sigasset_value"][value="6"]:checked ~ .sheet-value-1 { + display: block; +} +.sheet-dropdown .sheet-drop-sigasset:not(:hover) input[name="attr_sigasset_mark"] ~ input[name="attr_sigasset_value"][value="8"]:checked ~ .sheet-value-2 { + display: block; +} +.sheet-dropdown .sheet-drop-sigasset { + display: inline-block; + vertical-align: middle; + text-align: left; +} +.sheet-dropdown .sheet-drop-sigasset .sheet-value-1 { + display: none; +} +.sheet-dropdown .sheet-drop-sigasset .sheet-value-2 { display: none; } .sheet-dropdown input[name="attr_0_repeating_sigassets_sigasset_value"], -.sheet-dropdown input[name="attr_0_repeating_sigassets_sigasset_value"] + label { +.sheet-dropdown input[name="attr_0_repeating_sigassets_sigasset_value"] + span, +.sheet-dropdown input[name="attr_0_repeating_sigassets_sigasset_value"] + span + label { + display: none; +} +.sheet-dropdown input[name="attr_0_repeating_sigassets_sigasset_value"], +.sheet-dropdown input[name="attr_0_repeating_sigassets_sigasset_value"] + span, +.sheet-dropdown input[name="attr_0_repeating_sigassets_sigasset_value"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-sigasset:hover { @@ -2641,17 +2886,20 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_0_repeating_sigassets_sigasset_value"] { display: inline; } -.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_0_repeating_sigassets_sigasset_value"] + label { +.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_0_repeating_sigassets_sigasset_value"] + span, +.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_0_repeating_sigassets_sigasset_value"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_0_repeating_sigassets_sigasset_value"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_0_repeating_sigassets_sigasset_value"]:checked + label { +.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_0_repeating_sigassets_sigasset_value"]:checked + span, +.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_0_repeating_sigassets_sigasset_value"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_0_repeating_sigassets_sigasset_value"]:checked, -.sheet-dropdown input[name="attr_0_repeating_sigassets_sigasset_value"]:checked + label { +.sheet-dropdown input[name="attr_0_repeating_sigassets_sigasset_value"]:checked + span, +.sheet-dropdown input[name="attr_0_repeating_sigassets_sigasset_value"]:checked + span + label { display: none; } .sheet-dropdown .sheet-drop-sigasset:not(:hover) input[name="attr_0_repeating_sigassets_sigasset_mark"] ~ input[name="attr_0_repeating_sigassets_sigasset_value"][value="6"]:checked ~ .sheet-value-1 { @@ -2672,11 +2920,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_1_repeating_sigassets_sigasset_value"], -.sheet-dropdown input[name="attr_1_repeating_sigassets_sigasset_value"] + label { +.sheet-dropdown input[name="attr_1_repeating_sigassets_sigasset_value"] + span, +.sheet-dropdown input[name="attr_1_repeating_sigassets_sigasset_value"] + span + label { display: none; } .sheet-dropdown input[name="attr_1_repeating_sigassets_sigasset_value"], -.sheet-dropdown input[name="attr_1_repeating_sigassets_sigasset_value"] + label { +.sheet-dropdown input[name="attr_1_repeating_sigassets_sigasset_value"] + span, +.sheet-dropdown input[name="attr_1_repeating_sigassets_sigasset_value"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-sigasset:hover { @@ -2709,17 +2959,20 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_1_repeating_sigassets_sigasset_value"] { display: inline; } -.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_1_repeating_sigassets_sigasset_value"] + label { +.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_1_repeating_sigassets_sigasset_value"] + span, +.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_1_repeating_sigassets_sigasset_value"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_1_repeating_sigassets_sigasset_value"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_1_repeating_sigassets_sigasset_value"]:checked + label { +.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_1_repeating_sigassets_sigasset_value"]:checked + span, +.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_1_repeating_sigassets_sigasset_value"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_1_repeating_sigassets_sigasset_value"]:checked, -.sheet-dropdown input[name="attr_1_repeating_sigassets_sigasset_value"]:checked + label { +.sheet-dropdown input[name="attr_1_repeating_sigassets_sigasset_value"]:checked + span, +.sheet-dropdown input[name="attr_1_repeating_sigassets_sigasset_value"]:checked + span + label { display: none; } .sheet-dropdown .sheet-drop-sigasset:not(:hover) input[name="attr_1_repeating_sigassets_sigasset_mark"] ~ input[name="attr_1_repeating_sigassets_sigasset_value"][value="6"]:checked ~ .sheet-value-1 { @@ -2740,11 +2993,13 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti display: none; } .sheet-dropdown input[name="attr_2_repeating_sigassets_sigasset_value"], -.sheet-dropdown input[name="attr_2_repeating_sigassets_sigasset_value"] + label { +.sheet-dropdown input[name="attr_2_repeating_sigassets_sigasset_value"] + span, +.sheet-dropdown input[name="attr_2_repeating_sigassets_sigasset_value"] + span + label { display: none; } .sheet-dropdown input[name="attr_2_repeating_sigassets_sigasset_value"], -.sheet-dropdown input[name="attr_2_repeating_sigassets_sigasset_value"] + label { +.sheet-dropdown input[name="attr_2_repeating_sigassets_sigasset_value"] + span, +.sheet-dropdown input[name="attr_2_repeating_sigassets_sigasset_value"] + span + label { z-index: 1; } .sheet-dropdown .sheet-drop-sigasset:hover { @@ -2777,17 +3032,20 @@ fieldset[disabled] .sheet-skills table td .sheet-dropdown button[type=roll].acti .sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_2_repeating_sigassets_sigasset_value"] { display: inline; } -.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_2_repeating_sigassets_sigasset_value"] + label { +.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_2_repeating_sigassets_sigasset_value"] + span, +.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_2_repeating_sigassets_sigasset_value"] + span + label { display: inline; } .sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_2_repeating_sigassets_sigasset_value"]:checked { display: inline; } -.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_2_repeating_sigassets_sigasset_value"]:checked + label { +.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_2_repeating_sigassets_sigasset_value"]:checked + span, +.sheet-dropdown .sheet-drop-sigasset:hover input[name="attr_2_repeating_sigassets_sigasset_value"]:checked + span + label { display: inline; } .sheet-dropdown input[name="attr_2_repeating_sigassets_sigasset_value"]:checked, -.sheet-dropdown input[name="attr_2_repeating_sigassets_sigasset_value"]:checked + label { +.sheet-dropdown input[name="attr_2_repeating_sigassets_sigasset_value"]:checked + span, +.sheet-dropdown input[name="attr_2_repeating_sigassets_sigasset_value"]:checked + span + label { display: none; } .sheet-dropdown .sheet-drop-sigasset:not(:hover) input[name="attr_2_repeating_sigassets_sigasset_mark"] ~ input[name="attr_2_repeating_sigassets_sigasset_value"][value="6"]:checked ~ .sheet-value-1 { diff --git a/Firefly/firefly.html b/Firefly/firefly.html index c53bdfb715..1420ec05a5 100644 --- a/Firefly/firefly.html +++ b/Firefly/firefly.html @@ -13,11 +13,11 @@
- - - - - + + + + +
d4
d6
d8
@@ -29,11 +29,11 @@
- - - - - + + + + +
d4
d6
d8
@@ -45,11 +45,11 @@
- - - - - + + + + +
d4
d6
d8
@@ -66,55 +66,55 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + @@ -128,31 +128,29 @@
-
-
-
+
+
+

Highlighted Skills:

-
-
-
-
+
+
+

Highlighted Skills:

-
-
-
-
+
+
+

Highlighted Skills:

@@ -165,9 +163,8 @@
- - - + +
d6
d8
@@ -177,7 +174,7 @@
-
+
diff --git a/Firefly/mixins.less b/Firefly/mixins.less index 8e10d4d09b..da66da38ae 100644 --- a/Firefly/mixins.less +++ b/Firefly/mixins.less @@ -194,4 +194,74 @@ max-width: 100%; } +.hideCheckboxRadios() { +/* Hide actual radio/checkbox */ + opacity: 0; + width: 16px; + height: 16px; + position: relative; + top: 5px; + left: 6px; + margin: -10px; + cursor: pointer; + z-index: 1; +} +/** apply to input[type=radio/checkbox] */ +.fakeRadioCheckBox() { + .hideCheckboxRadios(); + & + span:before { + /* Fake radio/checkbox */ + margin-right: 4px; + 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; + + 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); + } +} + +.fakeRadio() { + & + span::before { + content: ""; + width: 12px; + height: 12px; + font-size: 24px; + + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + } + &:checked + span::before + { + content: "•"; + } +} + +.fakeCheckbox() { + & + span::before { + content: ""; + width: 14px; + height: 14px; + font-size: 12px; + + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + .check(); + } + &:checked + span::before { + .check-on(); + } +} diff --git a/Firefly/styles.less b/Firefly/styles.less index 92d078d91c..19f2e6ad52 100644 --- a/Firefly/styles.less +++ b/Firefly/styles.less @@ -85,6 +85,16 @@ .inputLine(); } } + input[type=checkbox], + input[type=radio] { + .fakeRadioCheckBox(); + } + input[type=checkbox] { + .fakeCheckbox(); + } + input[type=radio] { + .fakeRadio(); + } } } @@ -204,7 +214,6 @@ margin: 0; } input[type=checkbox] { - margin-right: 5px; } } } @@ -317,6 +326,7 @@ .makeDropdown(attr_Treat, 5); .makeDropdown(attr_Trick, 5); +.makeDropdownRepeat(attr_sigasset_value, attr_sigasset_mark, sigasset, 2, 35px, 2); .makeDropdownRepeat(attr_0_repeating_sigassets_sigasset_value, attr_0_repeating_sigassets_sigasset_mark, sigasset, 2, 35px, 2); .makeDropdownRepeat(attr_1_repeating_sigassets_sigasset_value, attr_1_repeating_sigassets_sigasset_mark, sigasset, 2, 35px, 2); .makeDropdownRepeat(attr_2_repeating_sigassets_sigasset_value, attr_2_repeating_sigassets_sigasset_mark, sigasset, 2, 35px, 2);
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12
d4
d6
d8
d10
d12