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}}