diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 5540cc1a0..68295ad2a 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -43,6 +43,10 @@
0 0.4em 0.4em oklch(var(--lch-black) / 5%),
0 0.8em 0.8em oklch(var(--lch-black) / 5%);
+ /* Patterns */
+ --wavy-background-mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px,
+ radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px;
+
/* Components */
--btn-size: 2.65em;
--footer-height: 3.5rem;
diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index b421f21ae..57edea0af 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -310,8 +310,7 @@
color-mix(in oklch, var(--color-considering) 0%, transparent) 100%);
content: "";
inset: 0;
- mask: radial-gradient(6px at 50% calc(100% + 3px), transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px,
- radial-gradient(6px at 50% -3px, transparent calc(99% - 2px), black calc(101% - 2px) 99%, transparent 101%) 50% calc(50% + 3px)/16px 6px;
+ mask: var(--wavy-background-mask);
position: absolute;
z-index: 0;
}
diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index bffd4211c..6d7fae212 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -193,6 +193,7 @@
display: flex;
flex: 0 1 auto;
flex-direction: column;
+ gap: 2px;
justify-self: end;
max-inline-size: 20ch;
padding-block: var(--block-space-half);
diff --git a/app/assets/stylesheets/workflows.css b/app/assets/stylesheets/workflows.css
index 2dc043584..5baee3422 100644
--- a/app/assets/stylesheets/workflows.css
+++ b/app/assets/stylesheets/workflows.css
@@ -7,6 +7,8 @@
color: inherit;
inline-size: 100%;
+ justify-content: flex-start;
+ text-transform: uppercase;
@media (hover: hover) {
&:hover {
@@ -27,6 +29,18 @@
}
}
+ @supports(mask: radial-gradient(black)) {
+ .workflow-stage--stream:before {
+ background: white;
+ content: "";
+ inset: 0;
+ mask: var(--wavy-background-mask);
+ position: absolute;
+ z-index: 0;
+ opacity: 0.25;
+ }
+ }
+
/* Workflow settings
/* ------------------------------------------------------------------------ */
diff --git a/app/helpers/workflows_helper.rb b/app/helpers/workflows_helper.rb
index f60e9d7f8..67956cd3e 100644
--- a/app/helpers/workflows_helper.rb
+++ b/app/helpers/workflows_helper.rb
@@ -4,7 +4,7 @@ module WorkflowsHelper
tag.span(stage.name, class: "overflow-ellipsis"),
card_staging_path(card, stage_id: stage),
method: :put,
- class: [ "btn justify-start workflow-stage txt-uppercase", { "workflow-stage--current": stage == card.stage } ],
+ class: [ "workflow-stage btn", { "workflow-stage--current": stage == card.stage } ],
form_class: "flex align-center gap-half",
data: { turbo_frame: "_top" }
end
diff --git a/app/views/cards/display/preview/_stages.html.erb b/app/views/cards/display/preview/_stages.html.erb
index c3d2929f1..34c70bf7e 100644
--- a/app/views/cards/display/preview/_stages.html.erb
+++ b/app/views/cards/display/preview/_stages.html.erb
@@ -1,7 +1,7 @@
<% if workflow = card.workflow %>
<% workflow.stages.each do |stage| %>
- <%= tag.span stage.name, class: ["overflow-ellipsis btn justify-start workflow-stage txt-uppercase", { "workflow-stage--current": stage == card.stage }] %>
+ <%= tag.span stage.name, class: ["workflow-stage btn overflow-ellipsis", { "workflow-stage--current": stage == card.stage }] %>
<% end %>
<% end %>
diff --git a/app/views/cards/display/public_preview/_stages.html.erb b/app/views/cards/display/public_preview/_stages.html.erb
index 848013cfe..824aa3136 100644
--- a/app/views/cards/display/public_preview/_stages.html.erb
+++ b/app/views/cards/display/public_preview/_stages.html.erb
@@ -2,7 +2,7 @@
<% workflow.stages.each do |stage| %>
<%= tag.div stage.name,
- class: ["overflow-ellipsis flex align-center gap-half btn non-clickable justify-start workflow-stage txt-uppercase no-hover", { "workflow-stage--current": stage == card.stage }] %>
+ class: ["workflow-stage overflow-ellipsis flex align-center gap-half btn non-clickable no-hover", { "workflow-stage--current": stage == card.stage }] %>
<% end %>
<% end %>
diff --git a/app/views/cards/stagings/_stages.html.erb b/app/views/cards/stagings/_stages.html.erb
index 48d018513..a96930fa6 100644
--- a/app/views/cards/stagings/_stages.html.erb
+++ b/app/views/cards/stagings/_stages.html.erb
@@ -1,16 +1,16 @@
<% if workflow = card.collection.workflow %>
<%= button_to "Not now", card_closure_path(card, reason: "Not now"),
- class: [ "btn justify-start workflow-stage txt-uppercase", { "workflow-stage--current": card.closed? } ],
+ class: [ "workflow-stage btn", { "workflow-stage--current": card.closed? } ],
form_class: "flex align-center gap-half" %>
<%= button_to "The Stream", card_engagement_path(card), method: :delete,
- class: [ "btn justify-start workflow-stage txt-uppercase", { "workflow-stage--current": card.considering? } ],
+ class: [ "workflow-stage workflow-stage--stream btn", { "workflow-stage--current": card.considering? } ],
form_class: "flex align-center gap-half" %>
<% workflow.stages.each do |stage| %>
<%= button_to_set_stage card, stage %>
<% end %>
<%= button_to "Closed", card_closure_path(card, reason: "Completed"),
- class: [ "btn justify-start workflow-stage txt-uppercase", { "workflow-stage--current": card.closed? } ],
+ class: [ "workflow-stage btn", { "workflow-stage--current": card.closed? } ],
form_class: "flex align-center gap-half" %>
<% end %>