1
0
Fork 0
forked from OpenNeo/impress
impress/app/assets/stylesheets/items/sources.sass
Matchu 341a8dd89c Disallow text wrapping in the "Total" cell in Item Getting Guide
The table layout algo can get a bit funky about how it assigns extra
space, I want to encourage things like "Total: 5 items" etc not to
wrap, esp in the Dyeworks case where it's quite long!
2024-06-20 13:55:04 -07:00

138 lines
2.4 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: 2.5em
height: 2.5em
.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
margin: .25em
tbody
tr
&:hover, &:focus-within
background: rgba($module-bg-color, 0.5)
thead
background: $module-bg-color
th
text-align: left
.name-cell
text-wrap: nowrap
.thumbnail-cell img
outline: 1px solid $soft-border-color
.actions-cell
button, a.button
/* Bootstrap's Purple 600 */
+awesome-button-color(#59359a)
tr[data-item-owned]
color: #aaa
a:not(.button)
color: inherit
.thumbnail-cell
filter: grayscale(1)
opacity: .75
.item-name
font-style: italic
text-decoration: line-through
text-decoration-color: rgba($text-color, 0.35)
.owned-explanation
font-style: italic
font-size: 85%
.actions-cell
button, a.button
+awesome-button-color(#999)
.price-breakdown
text-decoration-line: underline
text-decoration-style: dotted
cursor: help
.dyeworks-timeframe
font-style: italic
text-decoration-line: underline
text-decoration-style: dotted
cursor: help
.special-color-explanation
text-wrap: balance
font-style: italic
.subtitle
font-size: 85%
opacity: .85
a
color: inherit
.owls-info-link
cursor: help
.owls-info-label
text-decoration-line: underline
text-decoration-style: dotted
&[data-complexity="high"]
width: 70%
/* 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
&[data-group-owned]
thead
button, a.button
+awesome-button-color(#999)