Workflows index

app/assets/stylesheets/application.css

@@ -82,3 +82,34 @@ table {
         margin: 0;
     }
 }
+
+a[target=_blank]::after {
+    content: url("mingcute/external_link_line.svg");
+    display: inline-block;
+    scale: 0.7;
+    transform-origin: 0 50%;
+}
+
+.row {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: baseline;
+    gap: 1em;
+
+    > * {
+        margin: 0;
+    }
+
+    > .right {
+        margin-left: auto;
+    }
+}
+
+.mask-icon {
+    display: inline-block;
+    height: 1lh;
+    width: 1lh;
+    background-color: var(--icon-color, black);
+    mask-image: var(--icon, url("mingcute/task_line.svg"));
+    mask-size: 100%;
+}

app/assets/stylesheets/tabs.css

@@ -0,0 +1,28 @@
+.tabs {
+    padding-inline: 0;
+
+    li {
+        list-style: none;
+        margin: 0;
+    }
+
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+    gap: 0.25em;
+    
+    a {
+        text-decoration: none;
+        display: inline-block;
+        padding: 0.25em 0.5em;
+        border: 1px solid gray;
+        border-radius: 0.5em;
+
+        transition: background-color 0.2s, color 0.2s;
+
+        &.active, &:hover, &:focus {
+            background-color: var(--pico-primary);
+            color: white;
+        }
+    }
+}

app/assets/stylesheets/workflows.css

@@ -1,26 +1,25 @@
 .workflow {
-    --bg-color: #D1D5DB; /* Pico zinc 150 */
-    --text-color: oklch(from var(--bg-color) calc(0.55 * l) calc(0.55 * c) h);
+    --color: #424751; /* Pico zinc 700 */
 
     border-radius: 1em;
-    background-color: var(--bg-color);
-    color: var(--text-color);
+    outline: 2px solid var(--color);
 
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: center;
+    display: inline-flex;
+    gap: 0.25em;
     min-width: 2em;
     padding: 0.1em 0.5em;
-    gap: 0.5em;
-    text-align: center;
+
+    > .mask-icon {
+        --icon-color: var(--color);
+    }
 
     > img {
         max-width: unset;
         width: 1lh;
-        opacity: 0.6;
+        opacity: 0.75;
     }
 
     &.red {
-        --bg-color: #F06048; /* Pico red 400 */
+        --color: #BD3C13; /* Pico orange 550 */
     }
 }