1
0
Fork 0
forked from OpenNeo/impress
impress/app/assets/stylesheets/items/sources.sass
Matchu bb0d219508 Don't let action buttons wrap onto multiple lines in Item Getting Guide
A funny table-layout bug, where the item "Portal to the Unknown" had a
very long Owls listing ("Owls listing: Buyable - Magic Lens + Blank
Grey Tome (NP)"), and so the table layout tried to give it more room by
decreasing the width of the action cell and wrapping the "NC Trades"
action button text onto multiple lines.

The fix: don't allow that! The table layout will figure out how to
handle this being disallowed, and give the actions cell an appropriate
minimum width.
2024-05-28 17:16:41 -07:00

88 lines
1.6 KiB
Sass

@import "../partials/clean/constants"
@import "../partials/clean/mixins"
.item-list
border-collapse: collapse
border: 1px solid $soft-border-color
width: 60%
table-layout: auto
margin-bottom: 2em
td, th
border-top: 1px solid $soft-border-color
border-bottom: 1px solid $soft-border-color
padding: .25em
vertical-align: middle
&:first-child
padding-left: .5em
&:last-child
padding-right: .5em
.thumbnail-cell
width: 2.5em
height: 2.5em
img
display: block
width: 100%
height: 100%
.name-cell a
text-decoration: none
&:hover, &:focus
text-decoration: underline
.actions-cell
text-align: right
padding-left: 1em
font-size: 85%
a, button
/* When item names get long, don't let the buttons wrap to give the
* item names more space. The names should wrap more instead! */
text-wrap: nowrap
tbody
tr
&:hover, &:focus-within
background: rgba($module-bg-color, 0.5)
thead
background: $module-bg-color
th
text-align: left
.thumbnail-cell img
outline: 1px solid $soft-border-color
.actions-cell button
/* Bootstrap's Purple 600 */
+awesome-button-color(#59359a)
.special-color-explanation
text-wrap: balance
font-style: italic
.subtitle
font-size: 85%
opacity: .85
a[title]
text-decoration-line: underline
text-decoration-style: dotted
&:hover, &:focus
text-decoration-style: solid
/* For wearable items that belong to a specific set that all come together,
* like a Paint Brush. */
&[data-group-type="bundle"]
tbody
.thumbnail-cell
opacity: 0.65
tr:hover .thumbnail-cell
opacity: 0.85