diff --git a/less/update/components/actor-global.less b/less/update/components/actor-global.less index ddce5187..d0e0a732 100644 --- a/less/update/components/actor-global.less +++ b/less/update/components/actor-global.less @@ -939,6 +939,57 @@ } } .tab.powerbook { + .resource-items { + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 12px; + + .resource { + + h1 { + border: none; + margin: 0; + font-family: 'Russo One'; + font-size: 16px; + font-weight: 400; + text-align: center; + margin-bottom: 4px; + border-radius: 0; + } + + .attribute-value, + .attribute-value input { + .russoOne(22px); + text-align: center; + line-height: 1; + } + + .attribute-value { + display: grid; + grid-template-columns: auto 14px auto; + + input { + display: block; + width: 100%; + } + + .value-number { + display: block; + width: 100%; + text-align: right; + padding: 0px 3px; + &:last-child { + text-align: left; + } + } + + span.value-number { + padding: 1px 4px; + } + } + } + } + &>.panel { grid-template-rows: 32px 24px 24px auto; } diff --git a/sw5e-global.css b/sw5e-global.css index f5349371..97e12ad8 100644 --- a/sw5e-global.css +++ b/sw5e-global.css @@ -80,9 +80,6 @@ body { font-family: 'Open Sans'; font-size: 13px; font-weight: 400; - background-image: url('./ui/SW5e-logo.svg'); - background-repeat: no-repeat; - background-size: cover; } h1 { font-family: 'Russo One'; @@ -379,12 +376,12 @@ input[type="reset"]:disabled { padding: 0; border: none; } -.sw5e.chat-card .card-header, +.sw5e.chat-card .card-header img, .midi-qol-item-card .card-header img { flex: 0 0 36px; margin-right: 4px; } -.sw5e.chat-card .card-header, +.sw5e.chat-card .card-header h3, .midi-qol-item-card .card-header h3 { flex: 1; margin: 0; @@ -945,7 +942,7 @@ input[type="reset"]:disabled { } .sw5e.sheet.actor .swalt-sheet nav.sheet-navigation { display: grid; - grid-template-columns: repeat(7, 1fr); + grid-template-columns: repeat(6, 1fr); column-gap: 16px; margin: 4px 0; } @@ -1532,6 +1529,50 @@ input[type="reset"]:disabled { .sw5e.sheet.actor .swalt-sheet .tab.features > .panel { grid-template-rows: 24px auto; } +.sw5e.sheet.actor .swalt-sheet .tab.powerbook .resource-items { + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 12px; +} +.sw5e.sheet.actor .swalt-sheet .tab.powerbook .resource-items .resource h1 { + border: none; + margin: 0; + font-family: 'Russo One'; + font-size: 16px; + font-weight: 400; + text-align: center; + margin-bottom: 4px; + border-radius: 0; +} +.sw5e.sheet.actor .swalt-sheet .tab.powerbook .resource-items .resource .attribute-value, +.sw5e.sheet.actor .swalt-sheet .tab.powerbook .resource-items .resource .attribute-value input { + font-family: 'Russo One'; + font-size: 22px; + font-weight: 400; + letter-spacing: 0.5px; + text-align: center; + line-height: 1; +} +.sw5e.sheet.actor .swalt-sheet .tab.powerbook .resource-items .resource .attribute-value { + display: grid; + grid-template-columns: auto 14px auto; +} +.sw5e.sheet.actor .swalt-sheet .tab.powerbook .resource-items .resource .attribute-value input { + display: block; + width: 100%; +} +.sw5e.sheet.actor .swalt-sheet .tab.powerbook .resource-items .resource .attribute-value .value-number { + display: block; + width: 100%; + text-align: right; + padding: 0px 3px; +} +.sw5e.sheet.actor .swalt-sheet .tab.powerbook .resource-items .resource .attribute-value .value-number:last-child { + text-align: left; +} +.sw5e.sheet.actor .swalt-sheet .tab.powerbook .resource-items .resource .attribute-value span.value-number { + padding: 1px 4px; +} .sw5e.sheet.actor .swalt-sheet .tab.powerbook > .panel { grid-template-rows: 32px 24px 24px auto; } diff --git a/sw5e.css b/sw5e.css index 19c1a5fb..60b3c478 100644 --- a/sw5e.css +++ b/sw5e.css @@ -272,9 +272,12 @@ background: transparent; } .sw5e.sheet .editable .rollable:hover { + cursor: pointer; +} +.sw5e.sheet .editable h4.rollable:hover, +.sw5e.sheet .editable .rollable:hover > h4 { color: #000; text-shadow: 0 0 10px red; - cursor: pointer; } .sw5e.sheet span.sep { flex: none; @@ -366,6 +369,7 @@ overflow: hidden; } .sw5e.sheet .filter-list { + align-items: center; list-style: none; margin: 0; padding: 0; @@ -423,6 +427,28 @@ margin: 0; padding: 0; } +.sw5e.sheet .items-list .item-name { + flex: 2; + margin: 0; + overflow: hidden; + font-size: 13px; + text-align: left; + align-items: center; +} +.sw5e.sheet .items-list .item-name h3, +.sw5e.sheet .items-list .item-name h4 { + margin: 0; + white-space: nowrap; + overflow-x: hidden; +} +.sw5e.sheet .items-list .item-controls { + flex: 0 0 60px; + justify-content: space-between; +} +.sw5e.sheet .items-list .item-controls a { + font-size: 12px; + text-align: center; +} .sw5e.sheet .items-list .item { align-items: center; padding: 0 2px; @@ -459,25 +485,10 @@ font-size: 12px; text-align: center; } -.sw5e.sheet .items-list .items-header .item-name { +.sw5e.sheet .items-list .items-header h3 { padding-left: 5px; - font-size: 16px; -} -.sw5e.sheet .items-list .item-name { - flex: 2; - margin: 0; - overflow: hidden; - font-size: 13px; text-align: left; - align-items: center; -} -.sw5e.sheet .items-list .item-controls { - flex: 0 0 60px; - justify-content: space-between; -} -.sw5e.sheet .items-list .item-controls a { - font-size: 12px; - text-align: center; + font-size: 16px; } .sw5e.sheet .effects .item .effect-source, .sw5e.sheet .effects .item .effect-duration, @@ -586,7 +597,21 @@ height: 30px; line-height: 30px; } -.sw5e.sheet.actor .attributes input.temphp { +.sw5e.sheet.actor .sheet-header .attributes .movement h4.attribute-name { + position: relative; +} +.sw5e.sheet.actor .sheet-header .attributes .movement .config-button { + position: absolute; + display: none; + right: 0; + top: 1px; + font-size: 12px; + font-weight: normal; +} +.sw5e.sheet.actor .sheet-header .attributes .movement:hover .config-button { + display: block; +} +.sw5e.sheet.actor .sheet-header .attributes input.temphp { width: 48%; } .sw5e.sheet.actor h4.box-title { @@ -798,7 +823,7 @@ margin: 0 0 3px 0; justify-content: space-between; } -.sw5e.sheet.actor .traits .configure-flags { +.sw5e.sheet.actor .traits .config-button { flex: 1; } .sw5e.sheet.actor .traits label { @@ -871,8 +896,8 @@ .sw5e.sheet.actor .inventory-list .item .item-name i.attuned { color: #7a7971; } -.sw5e.sheet.actor .inventory-list .item .item-name h4 { - font-size: 14px; +.sw5e.sheet.actor .inventory-list .item .item-name i.not-attuned { + color: #44191A; } .sw5e.sheet.actor .inventory-list .item .item-uses input { width: 24px; @@ -905,6 +930,9 @@ .sw5e.sheet.actor .inventory-list .item-detail.item-action { flex: 0 0 100px; } +.sw5e.sheet.actor .inventory-list .item-detail.attunement { + flex: 0 0 24px; +} .sw5e.sheet.actor .inventory-list .item-weight { flex: 0 0 60px; border-left: 1px solid #c9c7b8; @@ -995,24 +1023,22 @@ flex: 0 0 240px; margin: 0; } -.sw5e.sheet.actor .powercasting-ability input, +.sw5e.sheet.actor .powercasting-ability label, .sw5e.sheet.actor .powercasting-ability span { - flex: 0 0 32px; + flex: none; +} +.sw5e.sheet.actor .powercasting-ability input { + flex: 0 0 28px; text-align: center; } .sw5e.sheet.actor .powercasting-ability select { margin: 0 5px; - flex: 0 0 150px; -} -.sw5e.sheet.actor .powercasting-ability h3.power-dc { - flex: 1; - text-align: right; + flex: 0 0 120px; } .sw5e.sheet.actor .power-slots, .sw5e.sheet.actor .power-comps { - flex: 0 0 75px; - padding-right: 5px; - text-align: right; + flex: none; + padding: 0 5px; font-size: 12px; color: #7a7971; border-right: 1px solid #c9c7b8; @@ -1025,9 +1051,10 @@ font-size: 13px; font-weight: normal; } -.sw5e.sheet.actor .power-uses { - padding-right: 8px; - text-align: right !important; +.sw5e.sheet.actor .powerbook .power-uses { + padding-right: 5px; + text-align: right; + color: #7a7971; } .sw5e.sheet.actor .power-school, .sw5e.sheet.actor .power-action, @@ -1069,6 +1096,7 @@ padding-right: 8px; margin-bottom: 4px; overflow-y: auto; + scrollbar-width: thin; } .sw5e.sheet.item { min-height: 660px; @@ -1587,7 +1615,7 @@ .sw5e.chat-card .card-footer span, .midi-qol-item-card .card-footer span { border-right: 2px groove #FFF; - padding: 0 5px 0 0; + padding: 0 3px 0 0; font-size: 10px; } .sw5e.chat-card .card-footer span:last-child, @@ -1762,7 +1790,7 @@ resize: none; } .sw5e.sheet.actor.character .biography { - max-width: calc(-80%); + max-width: calc(100% - 180px); } /* ----------------------------------------- */ /* Basic Structure */ @@ -1794,9 +1822,6 @@ .sw5e.sheet.actor.npc .summary { font-size: 18px; } -.sw5e.sheet.actor.npc .powercasting-ability label { - flex: none; -} .sw5e.sheet.actor.vehicle .features .item-controls { flex: 0 0 68px; } @@ -1817,30 +1842,3 @@ max-width: 40px; text-align: right; } -input[type="number"] { - width: calc(100% - 2px); - min-width: 20px; - height: 26px; - background: rgba(0, 0, 0, 0.05); - padding: 1px 3px; - margin: 0; - color: #191813; - font-family: inherit; - font-size: inherit; - text-align: inherit; - line-height: inherit; - border: 1px solid #7a7971; - border-radius: 3px; - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; - -moz-appearance: textfield; -} -input[type="number"]:focus { - box-shadow: 0 0 5px red; -} -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - -webkit-appearance: none; -} diff --git a/templates/actors/newActor/parts/swalt-powerbook.html b/templates/actors/newActor/parts/swalt-powerbook.html index f0fd12cc..adf7a022 100644 --- a/templates/actors/newActor/parts/swalt-powerbook.html +++ b/templates/actors/newActor/parts/swalt-powerbook.html @@ -1,3 +1,31 @@ + + + + Force Points + + + + / + + + + + + + Tech Points + + + + / + + + + + {{localize "SW5E.PowerAbility"}}