From 189db593aa7e75cfc1b34aef4fd6ed960e4047c7 Mon Sep 17 00:00:00 2001 From: macniel Date: Sun, 16 Nov 2025 10:18:02 +0100 Subject: [PATCH] fixes styling in merchant sheet --- src/style/atoms/_buttons.scss | 27 +++++++++++++++++++ src/style/atoms/_colours.scss | 8 ++++++ src/style/molecules/_equipment.scss | 3 ++- src/style/molecules/_liturgy-banner.scss | 4 +-- src/style/molecules/_rollable.scss | 13 +++------ src/style/organisms/_group-sheet.scss | 12 ++++----- src/style/organisms/_merchant-sheet.scss | 17 +++++++----- src/templates/actor/merchant/tab-services.hbs | 3 ++- 8 files changed, 62 insertions(+), 25 deletions(-) create mode 100644 src/style/atoms/_buttons.scss diff --git a/src/style/atoms/_buttons.scss b/src/style/atoms/_buttons.scss new file mode 100644 index 00000000..e13fa01d --- /dev/null +++ b/src/style/atoms/_buttons.scss @@ -0,0 +1,27 @@ +@use "./colours"; + +@mixin raised_button { + background: rgba(0, 0, 0, 0.05); + border: 1px solid #ccc; + box-shadow: 1px 1px 1px #ccc; + border-top-right-radius: 8px; + border-bottom-right-radius: 8px; +} + +@mixin uncut_raised_button { + @include raised_button; + border-radius: 8px; + + button { + background: unset; + border: unset; + box-shadow: unset; + color: black; + + &:hover { + color: black; + } + + @include colours.highlight; + } +} \ No newline at end of file diff --git a/src/style/atoms/_colours.scss b/src/style/atoms/_colours.scss index 64689d04..ffad2420 100644 --- a/src/style/atoms/_colours.scss +++ b/src/style/atoms/_colours.scss @@ -83,4 +83,12 @@ $special-action: rgba(68, 34, 204, 0.8); $special-action-color: #000; +@mixin highlight { + &:hover { + text-shadow: 0 0 10px red; + } +} +@mixin svg-highlight { + filter: drop-shadow(0px 0px 10px rgb(255 0 0)); +} \ No newline at end of file diff --git a/src/style/molecules/_equipment.scss b/src/style/molecules/_equipment.scss index 86c606e2..1ff14ae4 100644 --- a/src/style/molecules/_equipment.scss +++ b/src/style/molecules/_equipment.scss @@ -1,4 +1,5 @@ @use "../atoms/assets"; +@use "../atoms/colours" as colour; @mixin equipment($darkmode: false) { position: relative; @@ -44,7 +45,7 @@ &:hover { .name { - text-shadow: 0 0 10px rgb(255 0 0); + @include colour.highlight; } border: 1px solid #ccc; diff --git a/src/style/molecules/_liturgy-banner.scss b/src/style/molecules/_liturgy-banner.scss index 75b73fe7..cb0d4545 100644 --- a/src/style/molecules/_liturgy-banner.scss +++ b/src/style/molecules/_liturgy-banner.scss @@ -221,8 +221,8 @@ $deity_colours_tint: ( } } - .clickable:hover { - text-shadow: 0 0 10px rgb(255 0 0); + .clickable { + @include colour.highlight; } } diff --git a/src/style/molecules/_rollable.scss b/src/style/molecules/_rollable.scss index 69b30a92..ca2d0893 100644 --- a/src/style/molecules/_rollable.scss +++ b/src/style/molecules/_rollable.scss @@ -2,6 +2,7 @@ @use 'sass:map'; @use "../atoms/colours" as colour; @use "../atoms/numbers" as numbers; +@use "../atoms/buttons"; $rollable_colours: ( "nachteil": colour.$nachteil-color, @@ -148,9 +149,7 @@ $rollable_colours_font: ( bottom: 8px; z-index: 3; - &:hover { - text-shadow: 0 0 10px rgb(255 0 0); - } + @include colour.highlight; } } @@ -159,7 +158,7 @@ $rollable_colours_font: ( .die:hover { svg { - filter: drop-shadow(0px 0px 10px rgb(255 0 0)); + @include colour.svg-highlight; } @@ -195,11 +194,7 @@ $rollable_colours_font: ( .container { // background-image: linear-gradient(to right, rgba($color, numbers.$start_gradient), rgba($color, numbers.$end_gradient)); - background: rgba(0, 0, 0, 0.05); - border: 1px solid #ccc; - box-shadow: 1px 1px 1px #ccc; - border-top-right-radius: 8px; - border-bottom-right-radius: 8px; + @include buttons.raised_button; } } } diff --git a/src/style/organisms/_group-sheet.scss b/src/style/organisms/_group-sheet.scss index 00635e88..4d4aa441 100644 --- a/src/style/organisms/_group-sheet.scss +++ b/src/style/organisms/_group-sheet.scss @@ -1,3 +1,5 @@ +@use "../atoms/colours" as colour; + .application.sheet.dsa41.actor.group { .sheet-header { @@ -30,8 +32,8 @@ } } - .rollable:hover { - text-shadow: 0 0 10px rgb(255 0 0); + .rollable { + @include colour.highlight; } .character { @@ -131,9 +133,7 @@ display: inline-block; padding: 0 4px; - &:hover { - text-shadow: 0 0 10px rgb(255 0 0); - } + @include colour.highlight; } } } @@ -168,7 +168,7 @@ &:hover { .item-name { - text-shadow: 0 0 10px rgb(255 0 0); + @include colour.highlight; } } } diff --git a/src/style/organisms/_merchant-sheet.scss b/src/style/organisms/_merchant-sheet.scss index 8325fdf6..1eba2f36 100644 --- a/src/style/organisms/_merchant-sheet.scss +++ b/src/style/organisms/_merchant-sheet.scss @@ -1,3 +1,6 @@ +@use "../atoms/buttons"; + + .dsa41.actor.merchant { .tab.goods.active { @@ -22,9 +25,12 @@ overflow-y: auto; .merchant-good { + @include buttons.uncut_raised_button; + width: 100%; display: grid; break-inside: avoid; + grid-template-columns: 32px 1fr 32px; grid-template-rows: 16px 16px; grid-template-areas: "img title options" "img price options"; @@ -39,6 +45,7 @@ button { grid-area: options; + height: 100%; } .price { @@ -57,12 +64,7 @@ overflow-y: auto; .service { - - border: 1px inset rgba(0, 0, 0, 1); - background-color: rgba(0, 0, 0, 0.2); - border-radius: 4px; - padding: 4px; - margin: 4px 0; + @include buttons.uncut_raised_button; display: grid; grid-template-columns: 32px 1fr 32px; @@ -105,6 +107,9 @@ } &.infinite { + width: 32px; + bottom: -2px; + &::before { content: '∞'; } diff --git a/src/templates/actor/merchant/tab-services.hbs b/src/templates/actor/merchant/tab-services.hbs index 6f69dd1d..ca964624 100644 --- a/src/templates/actor/merchant/tab-services.hbs +++ b/src/templates/actor/merchant/tab-services.hbs @@ -40,7 +40,8 @@ {{this.name}} {{currency this.price}} {{this.availability}} + (lte this.availability 0)}}infinite{{/if}}">{{#unless + (lte this.availability 0)}}{{this.availability}}{{/unless}} {{/if}}