Quality of life interaction hinting to the character sheet (#64)
* Add the ability to roll attributes by clicking on them * Add pointer cursor to rollable text * Add hinting for changing coin count They get similar hints to rollable texts - they transition to another colour over a very short time, with a cursor change. * Lower transition period for hinting Lowered from 0.25 to 0.2 seconds. Just felt better.
This commit is contained in:
Daniel Gomme
GitHub
parent
a5ca6fa4c5
commit
1b7667f3b5
5 changed files with 174 additions and 19 deletions
|
|
@ -1,7 +1,20 @@
|
|||
/*
|
||||
* Elements that can be changed will hint this by dimming and fading a little on hover
|
||||
*/
|
||||
@mixin changeable($transition-period, $hover-brightness, $hover-opacity) {
|
||||
transition: filter $transition-period;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
filter: brightness($hover-brightness);
|
||||
opacity: $hover-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Toothradio
|
||||
* Toothradio. Some (eg trauma) are not changeable, hence the option.
|
||||
*/
|
||||
@mixin toothradio($width, $height, $unchecked_background, $checked_background) {
|
||||
@mixin toothradio($width, $height, $unchecked_background, $checked_background, $changeable: true) {
|
||||
|
||||
display: flex;
|
||||
|
||||
|
|
@ -25,6 +38,13 @@
|
|||
background: $almost_black !important;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
@if $changeable {
|
||||
@include changeable(0.1s, 0.8, 0.9);
|
||||
}
|
||||
@else {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -74,6 +94,8 @@
|
|||
background-color: $red !important;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
@include changeable(0.1s, 0.7, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -87,6 +109,8 @@
|
|||
background-color: $default_color;
|
||||
}
|
||||
& + label {
|
||||
// Less opacity here cos otherwise it's barely visible on the dark
|
||||
@include changeable(0.1s, 0.7, 0.7);
|
||||
background-color: $accent_color;
|
||||
}
|
||||
}
|
||||
|
|
@ -116,6 +140,7 @@
|
|||
&[for$="-0"] {
|
||||
margin-right: 0px;
|
||||
}
|
||||
@include changeable(0.1s, 0.8, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -150,6 +175,7 @@
|
|||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
margin-right: 10px;
|
||||
@include changeable(0.1s, 0.8, 0.9);
|
||||
|
||||
/* Hide the browser's default checkbox */
|
||||
input {
|
||||
|
|
@ -196,6 +222,8 @@
|
|||
height: 100%;
|
||||
transform-origin: 0% 100%;
|
||||
background-color: $accent_color;
|
||||
|
||||
@include changeable(0.1s, 0.8, 0.9);
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -231,7 +259,9 @@
|
|||
* Turf Block
|
||||
*/
|
||||
@mixin turf_block($turf_width, $turf_height) {
|
||||
|
||||
@include changeable(0.1s, 0.8, 0.9);
|
||||
|
||||
|
||||
$turf_margin: 20px;
|
||||
$connector_height: $turf_height/10;
|
||||
$connector_width: $turf_margin * 2;
|
||||
|
|
@ -327,7 +357,7 @@
|
|||
display: flex;
|
||||
|
||||
label {
|
||||
|
||||
@include changeable(0.1s, 0.8, 0.9);
|
||||
& {
|
||||
height: $height;
|
||||
width: $width;
|
||||
|
|
@ -363,7 +393,7 @@
|
|||
display: flex;
|
||||
|
||||
label {
|
||||
|
||||
@include changeable(0.1s, 0.8, 0.9);
|
||||
&:not([for$="-0"]) {
|
||||
height: $diameter;
|
||||
width: $diameter;
|
||||
|
|
@ -380,7 +410,6 @@
|
|||
display: none;
|
||||
|
||||
&:checked {
|
||||
|
||||
& ~ label:not([for$="-0"]) {
|
||||
border-color: $circle_border_color;
|
||||
background-color: $default_color;
|
||||
|
|
@ -391,4 +420,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -9,6 +9,11 @@ $green: #008000;
|
|||
$light_green: #12a012;
|
||||
$blue: #04578f;
|
||||
|
||||
// Transition period for sheet parts that hint what they can do
|
||||
$transition-period: 0.2s;
|
||||
$hover-opacity: 0.9;
|
||||
$hover-brightness: 0.8;
|
||||
|
||||
// Imports
|
||||
@import 'mixin.scss';
|
||||
|
||||
|
|
@ -177,6 +182,14 @@ $blue: #04578f;
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
.rollable-text {
|
||||
transition: color $transition-period;
|
||||
}
|
||||
.rollable-text:hover {
|
||||
cursor: pointer;
|
||||
color: $red;
|
||||
}
|
||||
|
||||
// Stress and Trauma
|
||||
|
||||
.big-teeth-section {
|
||||
|
|
@ -207,7 +220,7 @@ $blue: #04578f;
|
|||
.small-teeth-container {
|
||||
|
||||
.small-teeth-wrap {
|
||||
@include toothradio(17px, 50px, "assets/teeth/shorttooth-grey.png", "assets/teeth/shorttooth-red.png");
|
||||
@include toothradio(17px, 50px, "assets/teeth/shorttooth-grey.png", "assets/teeth/shorttooth-red.png", false);
|
||||
flex-direction: column;
|
||||
|
||||
.small-teeth {
|
||||
|
|
@ -309,7 +322,11 @@ $blue: #04578f;
|
|||
|
||||
.attribute-label,
|
||||
.attribute-skill-label {
|
||||
text-transform: capitalize;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.attribute-skill-label {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.attributes-exp {
|
||||
|
||||
|
|
@ -386,13 +403,15 @@ $blue: #04578f;
|
|||
@include custom_radio_square($coin_size);
|
||||
flex-wrap: wrap;
|
||||
|
||||
label {
|
||||
input ~ label {
|
||||
margin-right: $coin_margin;
|
||||
margin-bottom: $coin_margin;
|
||||
|
||||
&[for$="0"] {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
@include changeable($transition-period, $hover-brightness, $hover-opacity);
|
||||
}
|
||||
|
||||
&.coins-hands {
|
||||
|
|
@ -648,5 +667,4 @@ $blue: #04578f;
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
/*
|
||||
* Elements that can be changed will hint this by dimming and fading a little on hover
|
||||
*/
|
||||
/*
|
||||
* Toothradio
|
||||
* Toothradio. Some (eg trauma) are not changeable, hence the option.
|
||||
*/
|
||||
/*
|
||||
* Custom Radio
|
||||
|
|
@ -162,6 +165,13 @@
|
|||
* .description {
|
||||
font-style: italic;
|
||||
}
|
||||
* .rollable-text {
|
||||
transition: color 0.2s;
|
||||
}
|
||||
* .rollable-text:hover {
|
||||
cursor: pointer;
|
||||
color: red;
|
||||
}
|
||||
* .big-teeth-section {
|
||||
border-top: 3px solid #191813;
|
||||
display: flex;
|
||||
|
|
@ -189,6 +199,8 @@
|
|||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
margin-right: 5px;
|
||||
transition: filter 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
* .big-teeth-section .big-teeth label:last-of-type {
|
||||
margin-right: 0px;
|
||||
|
|
@ -200,6 +212,10 @@
|
|||
background: #191813 !important;
|
||||
margin-right: 0px;
|
||||
}
|
||||
* .big-teeth-section .big-teeth label:hover {
|
||||
filter: brightness(0.8);
|
||||
opacity: 0.9;
|
||||
}
|
||||
* .big-teeth-section .big-teeth input {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -221,6 +237,7 @@
|
|||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
margin-right: 5px;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
* .big-teeth-section .small-teeth-container .small-teeth-wrap label:last-of-type {
|
||||
margin-right: 0px;
|
||||
|
|
@ -259,8 +276,14 @@
|
|||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
margin-right: 10px;
|
||||
transition: filter 0.1s;
|
||||
cursor: pointer;
|
||||
/* Hide the browser's default checkbox */
|
||||
}
|
||||
* .big-teeth-section #trauma-list label:hover {
|
||||
filter: brightness(0.8);
|
||||
opacity: 0.9;
|
||||
}
|
||||
* .big-teeth-section #trauma-list label input {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -297,6 +320,8 @@
|
|||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
margin-right: 5px;
|
||||
transition: filter 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
* .teeth-experience label:last-of-type {
|
||||
margin-right: 0px;
|
||||
|
|
@ -308,6 +333,10 @@
|
|||
background: #191813 !important;
|
||||
margin-right: 0px;
|
||||
}
|
||||
* .teeth-experience label:hover {
|
||||
filter: brightness(0.8);
|
||||
opacity: 0.9;
|
||||
}
|
||||
* .teeth-experience input {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -353,6 +382,12 @@
|
|||
height: 100%;
|
||||
transform-origin: 0% 100%;
|
||||
background-color: red;
|
||||
transition: filter 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
* #harm-armor #character-health-clock label:hover {
|
||||
filter: brightness(0.8);
|
||||
opacity: 0.9;
|
||||
}
|
||||
* #harm-armor #character-health-clock input {
|
||||
position: absolute;
|
||||
|
|
@ -397,7 +432,11 @@
|
|||
}
|
||||
* #attributes .attribute-label,
|
||||
* #attributes .attribute-skill-label {
|
||||
text-transform: capitalize;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
* #attributes .attribute-skill-label {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
* #attributes .attributes-exp {
|
||||
position: relative;
|
||||
|
|
@ -417,6 +456,8 @@
|
|||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
margin-right: 5px;
|
||||
transition: filter 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
* #attributes .attributes-exp .stripe-tooth-body label:last-of-type {
|
||||
margin-right: 0px;
|
||||
|
|
@ -428,6 +469,10 @@
|
|||
background: #191813 !important;
|
||||
margin-right: 0px;
|
||||
}
|
||||
* #attributes .attributes-exp .stripe-tooth-body label:hover {
|
||||
filter: brightness(0.8);
|
||||
opacity: 0.9;
|
||||
}
|
||||
* #attributes .attributes-exp .stripe-tooth-body input {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -450,6 +495,8 @@
|
|||
vertical-align: middle;
|
||||
border: 2px solid #191813;
|
||||
border-radius: 24px;
|
||||
transition: filter 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
* #attributes .attributes-container label[for$="-0"] {
|
||||
height: 5px;
|
||||
|
|
@ -459,6 +506,10 @@
|
|||
background-color: red !important;
|
||||
margin-right: 0px;
|
||||
}
|
||||
* #attributes .attributes-container label:hover {
|
||||
filter: brightness(0.7);
|
||||
opacity: 0.7;
|
||||
}
|
||||
* #attributes .attributes-container input {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -466,8 +517,14 @@
|
|||
background-color: #EEEFFF;
|
||||
}
|
||||
* #attributes .attributes-container input:checked + label {
|
||||
transition: filter 0.1s;
|
||||
cursor: pointer;
|
||||
background-color: #191813;
|
||||
}
|
||||
* #attributes .attributes-container input:checked + label:hover {
|
||||
filter: brightness(0.7);
|
||||
opacity: 0.7;
|
||||
}
|
||||
* #attributes .attributes-container * {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
|
@ -516,10 +573,16 @@
|
|||
background-color: #DAA520;
|
||||
vertical-align: middle;
|
||||
border: 1px solid #191813;
|
||||
transition: filter 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
* .coins label[for$="-0"] {
|
||||
margin-right: 0px;
|
||||
}
|
||||
* .coins label:hover {
|
||||
filter: brightness(0.8);
|
||||
opacity: 0.9;
|
||||
}
|
||||
* .coins input {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -529,13 +592,19 @@
|
|||
* .coins input:checked + label {
|
||||
background-color: #DAA520;
|
||||
}
|
||||
* .coins label {
|
||||
* .coins input ~ label {
|
||||
margin-right: 3px;
|
||||
margin-bottom: 3px;
|
||||
transition: filter 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
* .coins label[for$="0"] {
|
||||
* .coins input ~ label[for$="0"] {
|
||||
border-width: 2px;
|
||||
}
|
||||
* .coins input ~ label:hover {
|
||||
filter: brightness(0.8);
|
||||
opacity: 0.9;
|
||||
}
|
||||
* .coins.coins-hands {
|
||||
width: 36px;
|
||||
}
|
||||
|
|
@ -554,10 +623,16 @@
|
|||
background-color: #DAA520;
|
||||
vertical-align: middle;
|
||||
border: 1px solid #191813;
|
||||
transition: filter 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
* .crew-coins label[for$="-0"] {
|
||||
margin-right: 0px;
|
||||
}
|
||||
* .crew-coins label:hover {
|
||||
filter: brightness(0.8);
|
||||
opacity: 0.9;
|
||||
}
|
||||
* .crew-coins input {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -583,6 +658,8 @@
|
|||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
margin-right: 5px;
|
||||
transition: filter 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
* #crew-reputation label:last-of-type {
|
||||
margin-right: 0px;
|
||||
|
|
@ -594,6 +671,10 @@
|
|||
background: #191813 !important;
|
||||
margin-right: 0px;
|
||||
}
|
||||
* #crew-reputation label:hover {
|
||||
filter: brightness(0.8);
|
||||
opacity: 0.9;
|
||||
}
|
||||
* #crew-reputation input {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -622,6 +703,8 @@
|
|||
margin-right: 0px;
|
||||
}
|
||||
* #turf-list.section-non-editable .turf-block {
|
||||
transition: filter 0.1s;
|
||||
cursor: pointer;
|
||||
width: 130px;
|
||||
height: 100px;
|
||||
background-color: #CCC;
|
||||
|
|
@ -629,6 +712,10 @@
|
|||
margin: 20px;
|
||||
flex-grow: initial;
|
||||
}
|
||||
* #turf-list.section-non-editable .turf-block:hover {
|
||||
filter: brightness(0.8);
|
||||
opacity: 0.9;
|
||||
}
|
||||
* #turf-list.section-non-editable .turf-block.turf-selected .connector {
|
||||
background-color: #999;
|
||||
z-index: 1;
|
||||
|
|
@ -687,6 +774,8 @@
|
|||
left: -7px;
|
||||
}
|
||||
* #turf-list.section-editable .turf-block {
|
||||
transition: filter 0.1s;
|
||||
cursor: pointer;
|
||||
width: 130px;
|
||||
height: 125px;
|
||||
background-color: #CCC;
|
||||
|
|
@ -694,6 +783,10 @@
|
|||
margin: 20px;
|
||||
flex-grow: initial;
|
||||
}
|
||||
* #turf-list.section-editable .turf-block:hover {
|
||||
filter: brightness(0.8);
|
||||
opacity: 0.9;
|
||||
}
|
||||
* #turf-list.section-editable .turf-block.turf-selected .connector {
|
||||
background-color: #999;
|
||||
z-index: 1;
|
||||
|
|
@ -757,6 +850,14 @@
|
|||
/* Hide the browser's default checkbox */
|
||||
width: 221px;
|
||||
}
|
||||
* #crew-hold label {
|
||||
transition: filter 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
* #crew-hold label:hover {
|
||||
filter: brightness(0.8);
|
||||
opacity: 0.9;
|
||||
}
|
||||
* #crew-hold label {
|
||||
height: 50px;
|
||||
width: 17px;
|
||||
|
|
@ -784,6 +885,14 @@
|
|||
display: flex;
|
||||
/* Hide the browser's default checkbox */
|
||||
}
|
||||
* #crew-tier label {
|
||||
transition: filter 0.1s;
|
||||
cursor: pointer;
|
||||
}
|
||||
* #crew-tier label:hover {
|
||||
filter: brightness(0.8);
|
||||
opacity: 0.9;
|
||||
}
|
||||
* #crew-tier label:not([for$="-0"]) {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -5,7 +5,7 @@
|
|||
<div id="attributes-{{attribute_name}}" class="attribute">
|
||||
<div id="attributes-{{attribute_name}}-title" class="attributes-exp">
|
||||
<div class="stripe">
|
||||
<label class="attribute-label" for="{{attribute_name}}-exp-0">{{localize attribute.label}}</label>
|
||||
<label class="attribute-label roll-die-attribute rollable-text" data-roll-attribute="{{attribute_name}}" for="{{attribute_name}}-exp-0">{{localize attribute.label}}</label>
|
||||
<a class="roll-die-attribute" data-roll-attribute="{{attribute_name}}" title="Roll"><i class="fas fa-dice"></i></a>
|
||||
</div>
|
||||
<div class="stripe-tooth-body">
|
||||
|
|
@ -44,10 +44,9 @@
|
|||
<label for="attributes-{{skill_name}}-3"></label>
|
||||
<input type="radio" id="attributes-{{skill_name}}-4" name="data.attributes.{{attribute_name}}.skills.{{skill_name}}.value" value="4">
|
||||
<label for="attributes-{{skill_name}}-4"></label>
|
||||
<div class="attribute-skill-label">{{localize skill.label}}</div>
|
||||
<div class="attribute-skill-label roll-die-attribute rollable-text" data-roll-attribute="{{skill_name}}">{{localize skill.label}}</div>
|
||||
{{/multiboxes}}
|
||||
</div>
|
||||
<a class="roll-die-attribute" data-roll-attribute="{{skill_name}}" title="Roll"><i class="fas fa-dice"></i></a>
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
|
|
|
|||
Reference in a new issue