.taf.PlayerSheet { > .window-content { background: var(--actor-sheet-background); } .sheet-header { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; padding: 0.5rem; margin: -0.5rem -0.5rem 0; color: var(--actor-sheet-header-colour); background: var(--actor-sheet-header-background); border-bottom: 1px solid var(--actor-sheet-divider-colour); img { border-radius: 4px; } input { color: var(--actor-sheet-header-input-colour); background: var(--actor-sheet-header-input-background); } } .attributes { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; gap: 0.25rem; fieldset { color: var(--attribute-colour); background: var(--attribute-background); border-radius: 6px; border: none; padding: 6px; } } .attr-range { display: flex; flex-direction: row; align-items: center; gap: 4px; width: 100px; margin: 0 auto; > input { color: var(--attribute-colour); background: var(--attribute-input-background); text-align: center; height: 24px; min-height: unset; &:focus { outline: 1px solid var(--attribute-input-focus-colour); } } } .items-tab.active, .attributes-tab.active { display: flex; flex-direction: column; gap: 8px; } .inventory-summary { display: flex; flex-direction: row; gap: 4px; align-items: center; background: var(--inventory-summary-background); color: var(--inventory-summary-colour); padding: 6px; border-radius: 4px; input { width: 75px; text-align: center; background: var(--inventory-input-background); color: var(--inventory-input-colour); text-align: center; &:disabled { color: var(--inventory-input-disabled-colour); cursor: not-allowed; } } } .embedded-list-header { display: flex; flex-direction: row; align-items: center; gap: 8px; border-radius: 6px 6px 0 0; padding: 6px 6px 4px; margin-bottom: 2px; background: var(--embedded-list-header-background); color: var(--embedded-list-header-colour); button { padding: 2px; border: none; aspect-ratio: 1; height: unset; min-height: unset; background: var(--embedded-list-header-input-background); color: var(--embedded-list-header-input-colour); } } .embedded-list { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; &.two-col { display: grid; grid-template-columns: repeat(2, 1fr); } } .item { background: var(--item-card-background); color: var(--item-card-colour); overflow: hidden; margin-bottom: 0; .summary { display: grid; grid-template-columns: min-content auto 1fr 50px auto; align-items: center; gap: 8px; background: var(--item-card-header-background); color: var(--item-card-header-colour); padding: 4px; img { --size: 35px; width: var(--size); height: var(--size); border-radius: 6px; } .title { display: flex; flex-direction: column; gap: 4px; } .name { font-size: 1.1rem; } .subtitle { font-size: 0.7rem; opacity: 90%; } input, button { background: var(--item-card-header-input-background); color: var(--item-card-header-input-colour); text-align: center; &:disabled { color: var(--item-card-header-disabled-input-colour); } } } .expand-button { border: none; aspect-ratio: 1; &:focus-visible { filter: brightness(150%); outline: none; } &[data-expanded="true"] { rotate: 180deg; } } .full-details { padding: 4px; &[data-expanded="false"] { display: none; } } &:last-child { border-radius: 0 0 6px 6px; } } .attribute { display: flex; flex-direction: row; align-items: center; gap: 8px; background: var(--attribute-background); color: var(--attribute-colour); padding: 4px; margin: 0; .name { font-size: 1.1rem; } input, button { border: none; background: var(--attribute-input-background); color: var(--attribute-input-colour); text-align: center; height: 24px; min-height: unset; &:disabled { color: var(--attribute-disabled-input-colour); } } input { width: 50px; &:focus { outline: 1px solid var(--attribute-input-focus-colour); } } button { &:active { background: var(--attribute-button-active-background); } &:focus-visible { outline: 1px solid var(--attribute-input-focus-colour); } } &:last-child:nth-child(odd) { grid-column: 1 / -1; border-radius: 0 0 6px 6px; } &:nth-last-child(2):has( + &:nth-child(even)) { border-radius: 0 0 0 6px; } &:last-child:nth-child(even) { border-radius: 0 0 6px 0; } } .content { border-radius: 6px; flex-grow: 1; overflow: hidden; --table-row-color-odd: var(--table-header-bg-color); &:not(:has(> prose-mirror)) { padding: 0.5rem; } } prose-mirror { height: 100%; menu { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } } }