fixed hover bugs

This commit is contained in:
LeeRhodes
2022-03-11 19:12:19 +00:00
parent e492470c7c
commit 81ae6f456c
9 changed files with 53 additions and 46 deletions
+19 -15
View File
@@ -83,6 +83,12 @@
.charsheet .list-group-container label.toggle-btn:hover {
background-color: #ccc;
}
.charsheet .roll-resource-label:hover,
.charsheet input[type=checkbox].momentum-burn:hover ~ div.momentum-burn-back:hover,
.charsheet .momentum-box-input:hover ~ .momentum-box-back:hover {
background: #ccc;
transition: 0.5s ease;
}
.charsheet .progress-input-holder input[min],
.charsheet .large-progress-input-holder input[min],
.charsheet input[min] + span,
@@ -887,10 +893,6 @@
text-align: center;
border-left: 1px solid #4c4d4f;
}
.charsheet .roll-resource-label:hover {
background: #ccc;
transition: 0.5s ease;
}
.charsheet .impact-list {
display: flex;
flex-flow: row wrap;
@@ -1022,12 +1024,13 @@
.charsheet .details-btn {
text-transform: uppercase;
display: inline-flex;
width: auto;
height: auto;
padding: 0em 1em;
margin: 0.3em 0.5em;
border-radius: 2em;
}
.charsheet .details-btn .btn-content {
border-radius: 0.5em;
padding: 0em 1em;
}
.charsheet .connection-name::placeholder,
.charsheet .connection-location::placeholder,
.charsheet .connection-descriptors::placeholder {
@@ -1158,6 +1161,9 @@
justify-content: center;
align-items: center;
}
.charsheet .progress-row .btn {
border-radius: 0.3em;
}
.charsheet .progress-name {
width: 100%;
font-weight: bold;
@@ -1371,14 +1377,6 @@
.charsheet .momentum {
display: flex;
}
.charsheet input[type=checkbox].momentum-burn:hover ~ div.momentum-burn-back {
background-color: #ccc;
transition: 0.5s ease;
}
.charsheet .momentum-box-input:hover ~ .momentum-box-back {
background: #ccc;
transition: 0.5s ease;
}
.charsheet .momentum-box-input:checked ~ .momentum-box-back {
background: #4c4d4f;
color: #fff;
@@ -3056,6 +3054,12 @@
.sheet-darkmode .list-group-container label.toggle-btn:hover {
background-color: #3d3d3d !important;
}
.sheet-darkmode .roll-resource-label:hover,
.sheet-darkmode input[type=checkbox].momentum-burn:hover ~ div.momentum-burn-back:hover,
.sheet-darkmode .momentum-box-input:hover ~ .momentum-box-back:hover {
background: #3d3d3d;
transition: 0.5s ease;
}
.sheet-darkmode .progress-input-holder input[min],
.sheet-darkmode .large-progress-input-holder input[min],
.sheet-darkmode input[min] + span,
+6 -12
View File
@@ -408,13 +408,10 @@
<fieldset class="repeating_connection">
<div class="connection-container surface">
<p class="connection-title i18n-text" data-i18n="character-name"></p>
<!-- i18n = 'character-name'-->
<input class="border-bottom connection-name" type="text" name="attr_connection-name" placeholder="Name"/>
<label class="btn details-btn surface-2">
<input class="hide-element btn-input" type="checkbox" name="attr_details_button"/>
<div class="btn-content i18n-text" data-i18n="details"></div>
</label>
<!-- i18n = 'details'-->
<label class="toggle-btn details-btn surface-2">
<input class="btn-input hide-element" type="checkbox" name="attr_details"/><span class="i18n-text btn-content" data-i18n="details"></span>
</label>
<input class="hide-element show-connection-info" type="checkbox" name="attr_details"/>
<div class="show-connection-info showhide">
<div class="full-width">
@@ -26885,13 +26882,10 @@
<fieldset class="repeating_connection">
<div class="connection-container surface">
<p class="connection-title i18n-text" data-i18n="character-name"></p>
<!-- i18n = 'character-name'-->
<input class="border-bottom connection-name" type="text" name="attr_connection-name" placeholder="Name"/>
<label class="btn details-btn surface-2">
<input class="hide-element btn-input" type="checkbox" name="attr_details_button"/>
<div class="btn-content i18n-text" data-i18n="details"></div>
</label>
<!-- i18n = 'details'-->
<label class="toggle-btn details-btn surface-2">
<input class="btn-input hide-element" type="checkbox" name="attr_details"/><span class="i18n-text btn-content" data-i18n="details"></span>
</label>
<input class="hide-element show-connection-info" type="checkbox" name="attr_details"/>
<div class="show-connection-info showhide">
<div class="full-width">
@@ -128,5 +128,12 @@ textColor = #c0c0c0
label.toggle-btn
&:hover
background-color #3d3d3d !important
.roll-resource-label,
input[type=checkbox].momentum-burn:hover ~ div.momentum-burn-back,
.momentum-box-input:hover ~ .momentum-box-back
&:hover
background #3d3d3d
transition 0.5s ease
progress(textColor, backgroundColor)
@@ -70,5 +70,12 @@ light-styles()
label.toggle-btn
&:hover
background-color #cccccc
.roll-resource-label,
input[type=checkbox].momentum-burn:hover ~ div.momentum-burn-back,
.momentum-box-input:hover ~ .momentum-box-back
&:hover
background #ccc
transition 0.5s ease
progress(textColor, backgroundColor)
@@ -5,12 +5,14 @@ mixin connections()
fieldset.repeating_connection
.connection-container.surface
p.connection-title.i18n-text(data-i18n='character-name')
// i18n = 'character-name'
input.border-bottom.connection-name(type='text' name='attr_connection-name' placeholder='Name')
label.btn.details-btn.surface-2
input.hide-element.btn-input(type='checkbox' name='attr_details_button')
.btn-content.i18n-text(data-i18n='details')
// i18n = 'details'
+btn({
type: 'checkbox',
translationId: 'details',
attribute: `details`,
classes: 'details-btn surface-2',
pure_attr: true
})
input.hide-element.show-connection-info(type='checkbox' name='attr_details')
.show-connection-info.showhide
.full-width
@@ -56,11 +56,11 @@ p
.details-btn
text-transform uppercase
display inline-flex
width auto
height auto
padding 0em 1em
margin 0.3em 0.5em
border-radius 2em
.btn-content
border-radius 0.5em
padding 0em 1em
.connection-name::placeholder,
.connection-location::placeholder,
@@ -4,14 +4,6 @@
.momentum
display flex
input[type=checkbox].momentum-burn:hover ~ div.momentum-burn-back
background-color #ccc
transition: .5s ease;
.momentum-box-input:hover ~ .momentum-box-back
background: #ccc
transition: .5s ease;
.momentum-box-input:checked ~ .momentum-box-back
background: #4C4D4F
color: white
@@ -18,6 +18,10 @@
justify-content center
align-items center
.progress-row
.btn
border-radius 0.3em
.progress-name
width 100%
font-weight bold
@@ -109,6 +109,3 @@ input[type=text].resource-value
cursor pointer
text-align center
border-left 1px solid #4C4D4F
&:hover
background #ccc
transition 0.5s ease