diff options
| -rw-r--r-- | Omni/Jr/Web/Style.hs | 303 |
1 files changed, 153 insertions, 150 deletions
diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs index f91fb02..140d4bb 100644 --- a/Omni/Jr/Web/Style.hs +++ b/Omni/Jr/Web/Style.hs @@ -14,7 +14,6 @@ import Clay import qualified Clay.Flexbox as Flexbox import qualified Clay.Media as Media import qualified Clay.Stylesheet as Stylesheet -import qualified Data.List.NonEmpty as NE import qualified Data.Text.Lazy as LazyText css :: LazyText.Text @@ -51,25 +50,25 @@ baseStyles = do "sans-serif" ] [sansSerif] - fontSize (px 16) - lineHeight (em 1.5) + fontSize (px 14) + lineHeight (em 1.3) color "#1f2937" - backgroundColor "#f3f4f6" + backgroundColor "#f5f5f5" minHeight (vh 100) "h1" ? do - fontSize (px 24) + fontSize (px 20) fontWeight bold - margin (px 0) (px 0) (em 0.5) (px 0) + margin (px 0) (px 0) (em 0.3) (px 0) "h2" ? do - fontSize (px 18) + fontSize (px 16) fontWeight (weight 600) color "#374151" - margin (em 1.5) (px 0) (em 0.75) (px 0) + margin (em 1) (px 0) (em 0.5) (px 0) "h3" ? do - fontSize (px 16) + fontSize (px 14) fontWeight (weight 600) color "#374151" - margin (em 1) (px 0) (em 0.5) (px 0) + margin (em 0.75) (px 0) (em 0.25) (px 0) a ? do color "#0066cc" textDecoration none @@ -78,15 +77,15 @@ baseStyles = do fontFamily ["SF Mono", "Monaco", "Consolas", "monospace"] [monospace] fontSize (em 0.9) backgroundColor "#f3f4f6" - padding (px 2) (px 6) (px 2) (px 6) - borderRadius (px 4) (px 4) (px 4) (px 4) + padding (px 1) (px 4) (px 1) (px 4) + borderRadius (px 2) (px 2) (px 2) (px 2) pre ? do fontFamily ["SF Mono", "Monaco", "Consolas", "monospace"] [monospace] - fontSize (px 13) + fontSize (px 12) backgroundColor "#1e1e1e" color "#d4d4d4" - padding (px 16) (px 16) (px 16) (px 16) - borderRadius (px 6) (px 6) (px 6) (px 6) + padding (px 8) (px 8) (px 8) (px 8) + borderRadius (px 2) (px 2) (px 2) (px 2) overflow auto whiteSpace preWrap maxHeight (px 500) @@ -95,46 +94,47 @@ layoutStyles :: Css layoutStyles = do ".container" ? do width (pct 100) - maxWidth (px 900) + maxWidth (px 960) margin (px 0) auto (px 0) auto - padding (px 16) (px 16) (px 16) (px 16) + padding (px 8) (px 12) (px 8) (px 12) main_ ? do Stylesheet.key "flex" ("1 0 auto" :: Text) ".page-content" ? do padding (px 0) (px 0) (px 0) (px 0) ".stats-grid" ? do display grid - Stylesheet.key "grid-template-columns" ("repeat(auto-fit, minmax(100px, 1fr))" :: Text) - Stylesheet.key "gap" ("12px" :: Text) + Stylesheet.key "grid-template-columns" ("repeat(auto-fit, minmax(80px, 1fr))" :: Text) + Stylesheet.key "gap" ("6px" :: Text) ".task-list" ? do display flex flexDirection column - Stylesheet.key "gap" ("8px" :: Text) + Stylesheet.key "gap" ("2px" :: Text) ".detail-row" ? do display flex flexWrap Flexbox.wrap - padding (px 10) (px 0) (px 10) (px 0) + padding (px 6) (px 0) (px 6) (px 0) borderBottom (px 1) solid "#e5e7eb" ".detail-row" # lastChild ? borderBottom (px 0) none transparent ".detail-label" ? do fontWeight (weight 600) - width (px 120) + width (px 100) color "#6b7280" - minWidth (px 100) + minWidth (px 80) + fontSize (px 13) ".detail-value" ? do Stylesheet.key "flex" ("1" :: Text) minWidth (px 0) ".detail-section" ? do - marginTop (em 1) - paddingTop (em 1) + marginTop (em 0.75) + paddingTop (em 0.75) borderTop (px 1) solid "#e5e7eb" ".dep-list" <> ".child-list" ? do - margin (px 8) (px 0) (px 8) (px 0) - paddingLeft (px 24) - (".dep-list" ** li) <> (".child-list" ** li) ? margin (px 6) (px 0) (px 6) (px 0) + margin (px 4) (px 0) (px 4) (px 0) + paddingLeft (px 16) + (".dep-list" ** li) <> (".child-list" ** li) ? margin (px 2) (px 0) (px 2) (px 0) ".dep-type" <> ".child-status" ? do color "#6b7280" - fontSize (px 13) + fontSize (px 12) ".child-title" ? color "#374151" ".priority-desc" ? do color "#6b7280" @@ -144,31 +144,31 @@ navigationStyles :: Css navigationStyles = do ".navbar" ? do backgroundColor white - padding (px 12) (px 20) (px 12) (px 20) - boxShadow (NE.singleton (bsColor (rgba 0 0 0 0.08) (shadow (px 0) (px 2)))) - marginBottom (px 16) + padding (px 6) (px 12) (px 6) (px 12) + borderBottom (px 1) solid "#d0d0d0" + marginBottom (px 8) display flex alignItems center justifyContent spaceBetween flexWrap Flexbox.wrap - Stylesheet.key "gap" ("12px" :: Text) + Stylesheet.key "gap" ("8px" :: Text) ".navbar-brand" ? do - fontSize (px 22) + fontSize (px 18) fontWeight bold color "#0066cc" textDecoration none ".navbar-brand" # hover ? textDecoration none ".navbar-links" ? do display flex - Stylesheet.key "gap" ("4px" :: Text) + Stylesheet.key "gap" ("2px" :: Text) flexWrap Flexbox.wrap ".navbar-link" ? do display inlineBlock - padding (px 8) (px 14) (px 8) (px 14) + padding (px 4) (px 10) (px 4) (px 10) color "#374151" textDecoration none - borderRadius (px 6) (px 6) (px 6) (px 6) - fontSize (px 14) + borderRadius (px 2) (px 2) (px 2) (px 2) + fontSize (px 13) fontWeight (weight 500) transition "background-color" (ms 150) ease (sec 0) ".navbar-link" # hover ? do @@ -176,32 +176,32 @@ navigationStyles = do textDecoration none header ? do backgroundColor white - padding (px 12) (px 16) (px 12) (px 16) - boxShadow (NE.singleton (bsColor (rgba 0 0 0 0.08) (shadow (px 0) (px 2)))) - marginBottom (px 16) + padding (px 6) (px 12) (px 6) (px 12) + borderBottom (px 1) solid "#d0d0d0" + marginBottom (px 8) ".nav-content" ? do - maxWidth (px 900) + maxWidth (px 960) margin (px 0) auto (px 0) auto display flex alignItems center justifyContent spaceBetween flexWrap Flexbox.wrap - Stylesheet.key "gap" ("12px" :: Text) + Stylesheet.key "gap" ("8px" :: Text) ".nav-brand" ? do - fontSize (px 20) + fontSize (px 16) fontWeight bold color "#1f2937" textDecoration none ".nav-brand" # hover ? textDecoration none ".nav-links" ? do display flex - Stylesheet.key "gap" ("8px" :: Text) + Stylesheet.key "gap" ("4px" :: Text) flexWrap Flexbox.wrap ".actions" ? do display flex flexWrap Flexbox.wrap - Stylesheet.key "gap" ("8px" :: Text) - marginBottom (px 16) + Stylesheet.key "gap" ("6px" :: Text) + marginBottom (px 8) cardStyles :: Css cardStyles = do @@ -216,17 +216,17 @@ cardStyles = do <> ".review-actions" ? do backgroundColor white - borderRadius (px 8) (px 8) (px 8) (px 8) - padding (px 16) (px 16) (px 16) (px 16) - boxShadow (NE.singleton (bsColor (rgba 0 0 0 0.1) (shadow (px 0) (px 1)))) + borderRadius (px 2) (px 2) (px 2) (px 2) + padding (px 8) (px 10) (px 8) (px 10) + border (px 1) solid "#d0d0d0" ".stat-card" ? textAlign center ".stat-count" ? do - fontSize (px 28) + fontSize (px 22) fontWeight bold ".stat-label" ? do - fontSize (px 12) + fontSize (px 11) color "#6b7280" - marginTop (px 4) + marginTop (px 2) ".stat-card.badge-open" ? do borderLeft (px 4) solid "#f59e0b" (".stat-card.badge-open" |> ".stat-count") ? color "#92400e" @@ -239,9 +239,9 @@ cardStyles = do ".stat-card.badge-done" ? borderLeft (px 4) solid "#10b981" (".stat-card.badge-done" |> ".stat-count") ? color "#065f46" ".task-card" ? do - transition "box-shadow" (ms 150) ease (sec 0) + transition "border-color" (ms 150) ease (sec 0) ".task-card" # hover ? do - boxShadow (NE.singleton (bsColor (rgba 0 0 0 0.15) (shadow (px 0) (px 4)))) + borderColor "#999" ".task-card-link" ? do display block textDecoration none @@ -252,100 +252,103 @@ cardStyles = do display flex flexWrap Flexbox.wrap alignItems center - Stylesheet.key "gap" ("8px" :: Text) - marginBottom (px 8) + Stylesheet.key "gap" ("6px" :: Text) + marginBottom (px 4) ".task-id" ? do fontFamily ["SF Mono", "Monaco", "monospace"] [monospace] color "#0066cc" textDecoration none - fontSize (px 14) - padding (px 4) (px 0) (px 4) (px 0) + fontSize (px 12) + padding (px 2) (px 0) (px 2) (px 0) ".task-id" # hover ? textDecoration underline ".priority" ? do - fontSize (px 12) + fontSize (px 11) color "#6b7280" ".task-title" ? do - fontSize (px 16) + fontSize (px 14) margin (px 0) (px 0) (px 0) (px 0) ".empty-msg" ? do color "#6b7280" fontStyle italic ".ready-link" ? do - fontSize (px 14) + fontSize (px 13) color "#0066cc" ".count-badge" ? do backgroundColor "#0066cc" color white - padding (px 4) (px 10) (px 4) (px 10) - borderRadius (px 12) (px 12) (px 12) (px 12) - fontSize (px 14) + padding (px 2) (px 8) (px 2) (px 8) + borderRadius (px 10) (px 10) (px 10) (px 10) + fontSize (px 12) verticalAlign middle ".description" ? do backgroundColor "#f9fafb" - padding (px 12) (px 12) (px 12) (px 12) - borderRadius (px 4) (px 4) (px 4) (px 4) + padding (px 8) (px 8) (px 8) (px 8) + borderRadius (px 2) (px 2) (px 2) (px 2) margin (px 0) (px 0) (px 0) (px 0) color "#374151" + fontSize (px 13) ".diff-block" ? do maxHeight (px 600) overflowY auto ".progress-bar" ? do - height (px 8) + height (px 6) backgroundColor "#e5e7eb" - borderRadius (px 4) (px 4) (px 4) (px 4) + borderRadius (px 2) (px 2) (px 2) (px 2) overflow hidden - marginTop (px 8) + marginTop (px 6) ".progress-fill" ? do height (pct 100) backgroundColor "#0066cc" - borderRadius (px 4) (px 4) (px 4) (px 4) + borderRadius (px 2) (px 2) (px 2) (px 2) transition "width" (ms 300) ease (sec 0) ".stats-section" ? do backgroundColor white - borderRadius (px 8) (px 8) (px 8) (px 8) - padding (px 16) (px 16) (px 16) (px 16) - boxShadow (NE.singleton (bsColor (rgba 0 0 0 0.1) (shadow (px 0) (px 1)))) + borderRadius (px 2) (px 2) (px 2) (px 2) + padding (px 8) (px 10) (px 8) (px 10) + border (px 1) solid "#d0d0d0" ".stats-row" ? do display flex alignItems center - Stylesheet.key "gap" ("12px" :: Text) - padding (px 8) (px 0) (px 8) (px 0) + Stylesheet.key "gap" ("8px" :: Text) + padding (px 4) (px 0) (px 4) (px 0) borderBottom (px 1) solid "#e5e7eb" ".stats-row" # lastChild ? borderBottom (px 0) none transparent ".stats-label" ? do - minWidth (px 100) + minWidth (px 80) fontWeight (weight 500) + fontSize (px 13) ".stats-bar-container" ? do Stylesheet.key "flex" ("1" :: Text) ".stats-count" ? do - minWidth (px 40) + minWidth (px 32) textAlign (alignSide sideRight) fontWeight (weight 500) + fontSize (px 13) ".summary-section" ? do backgroundColor white - borderRadius (px 8) (px 8) (px 8) (px 8) - padding (px 16) (px 16) (px 16) (px 16) - boxShadow (NE.singleton (bsColor (rgba 0 0 0 0.1) (shadow (px 0) (px 1)))) + borderRadius (px 2) (px 2) (px 2) (px 2) + padding (px 8) (px 10) (px 8) (px 10) + border (px 1) solid "#d0d0d0" ".no-commit-msg" ? do backgroundColor "#fff3cd" border (px 1) solid "#ffc107" - borderRadius (px 8) (px 8) (px 8) (px 8) - padding (px 16) (px 16) (px 16) (px 16) - margin (px 16) (px 0) (px 16) (px 0) + borderRadius (px 2) (px 2) (px 2) (px 2) + padding (px 8) (px 10) (px 8) (px 10) + margin (px 8) (px 0) (px 8) (px 0) ".conflict-warning" ? do backgroundColor "#fee2e2" border (px 1) solid "#ef4444" - borderRadius (px 8) (px 8) (px 8) (px 8) - padding (px 16) (px 16) (px 16) (px 16) - margin (px 16) (px 0) (px 16) (px 0) + borderRadius (px 2) (px 2) (px 2) (px 2) + padding (px 8) (px 10) (px 8) (px 10) + margin (px 8) (px 0) (px 8) (px 0) statusBadges :: Css statusBadges = do ".badge" ? do display inlineBlock - padding (px 4) (px 10) (px 4) (px 10) - borderRadius (px 20) (px 20) (px 20) (px 20) - fontSize (px 12) + padding (px 2) (px 6) (px 2) (px 6) + borderRadius (px 2) (px 2) (px 2) (px 2) + fontSize (px 11) fontWeight (weight 500) whiteSpace nowrap ".badge-open" ? do @@ -375,11 +378,11 @@ buttonStyles = do <> ".review-link-btn" ? do display inlineBlock - minHeight (px 44) - padding (px 10) (px 20) (px 10) (px 20) - borderRadius (px 6) (px 6) (px 6) (px 6) + minHeight (px 32) + padding (px 6) (px 12) (px 6) (px 12) + borderRadius (px 2) (px 2) (px 2) (px 2) border (px 0) none transparent - fontSize (px 14) + fontSize (px 13) fontWeight (weight 500) textDecoration none cursor pointer @@ -415,77 +418,77 @@ buttonStyles = do ".reject-btn" # hover ? backgroundColor "#dc2626" ".clear-btn" ? do display inlineBlock - minHeight (px 44) - padding (px 10) (px 16) (px 10) (px 16) + minHeight (px 32) + padding (px 6) (px 10) (px 6) (px 10) backgroundColor "#6b7280" color white - borderRadius (px 6) (px 6) (px 6) (px 6) + borderRadius (px 2) (px 2) (px 2) (px 2) textDecoration none - fontSize (px 14) + fontSize (px 13) cursor pointer ".clear-btn" # hover ? backgroundColor "#4b5563" ".review-link-btn" ? do backgroundColor "#8b5cf6" color white ".review-link-btn" # hover ? backgroundColor "#7c3aed" - ".review-link-section" ? margin (px 16) (px 0) (px 16) (px 0) + ".review-link-section" ? margin (px 8) (px 0) (px 8) (px 0) formStyles :: Css formStyles = do ".filter-row" ? do display flex flexWrap Flexbox.wrap - Stylesheet.key "gap" ("12px" :: Text) + Stylesheet.key "gap" ("8px" :: Text) alignItems flexEnd ".filter-group" ? do display flex flexDirection column - Stylesheet.key "gap" ("4px" :: Text) + Stylesheet.key "gap" ("2px" :: Text) (".filter-group" |> label) ? do - fontSize (px 12) + fontSize (px 11) color "#6b7280" fontWeight (weight 500) ".filter-select" <> ".filter-input" <> ".status-select" ? do - minHeight (px 44) - padding (px 10) (px 14) (px 10) (px 14) + minHeight (px 32) + padding (px 6) (px 10) (px 6) (px 10) border (px 1) solid "#d1d5db" - borderRadius (px 6) (px 6) (px 6) (px 6) - fontSize (px 14) - minWidth (px 120) - ".filter-input" ? minWidth (px 150) + borderRadius (px 2) (px 2) (px 2) (px 2) + fontSize (px 13) + minWidth (px 100) + ".filter-input" ? minWidth (px 120) ".inline-form" ? display inlineBlock ".reject-form" ? do display flex - Stylesheet.key "gap" ("8px" :: Text) + Stylesheet.key "gap" ("6px" :: Text) Stylesheet.key "flex" ("1" :: Text) - minWidth (px 250) + minWidth (px 200) flexWrap Flexbox.wrap ".reject-notes" ? do Stylesheet.key "flex" ("1" :: Text) - minWidth (px 200) - minHeight (px 44) - padding (px 10) (px 14) (px 10) (px 14) + minWidth (px 160) + minHeight (px 32) + padding (px 6) (px 10) (px 6) (px 10) border (px 1) solid "#d1d5db" - borderRadius (px 6) (px 6) (px 6) (px 6) - fontSize (px 14) + borderRadius (px 2) (px 2) (px 2) (px 2) + fontSize (px 13) Stylesheet.key "resize" ("vertical" :: Text) activityTimelineStyles :: Css activityTimelineStyles = do ".activity-section" ? do - marginTop (em 1.5) + marginTop (em 1) backgroundColor white - borderRadius (px 8) (px 8) (px 8) (px 8) - padding (px 16) (px 16) (px 16) (px 16) - boxShadow (NE.singleton (bsColor (rgba 0 0 0 0.1) (shadow (px 0) (px 1)))) + borderRadius (px 2) (px 2) (px 2) (px 2) + padding (px 8) (px 10) (px 8) (px 10) + border (px 1) solid "#d0d0d0" ".activity-timeline" ? do position relative - paddingLeft (px 24) - marginTop (px 12) + paddingLeft (px 20) + marginTop (px 8) ".activity-timeline" # before ? do Stylesheet.key "content" ("''" :: Text) position absolute - left (px 8) + left (px 6) top (px 0) bottom (px 0) width (px 2) @@ -493,20 +496,20 @@ activityTimelineStyles = do ".activity-item" ? do position relative display flex - Stylesheet.key "gap" ("12px" :: Text) - paddingBottom (px 16) + Stylesheet.key "gap" ("8px" :: Text) + paddingBottom (px 10) marginBottom (px 0) ".activity-item" # lastChild ? paddingBottom (px 0) ".activity-icon" ? do position absolute - left (px (-20)) - width (px 18) - height (px 18) + left (px (-16)) + width (px 14) + height (px 14) borderRadius (pct 50) (pct 50) (pct 50) (pct 50) display flex alignItems center justifyContent center - fontSize (px 10) + fontSize (px 8) fontWeight bold backgroundColor white border (px 2) solid "#e5e7eb" @@ -515,31 +518,31 @@ activityTimelineStyles = do ".activity-header" ? do display flex alignItems center - Stylesheet.key "gap" ("8px" :: Text) - marginBottom (px 4) + Stylesheet.key "gap" ("6px" :: Text) + marginBottom (px 2) ".activity-stage" ? do fontWeight (weight 600) - fontSize (px 14) - ".activity-time" ? do fontSize (px 12) + ".activity-time" ? do + fontSize (px 11) color "#6b7280" ".activity-message" ? do - margin (px 4) (px 0) (px 0) (px 0) - fontSize (px 14) + margin (px 2) (px 0) (px 0) (px 0) + fontSize (px 12) color "#374151" ".activity-metadata" ? do - marginTop (px 8) + marginTop (px 4) (".activity-metadata" |> "summary") ? do - fontSize (px 12) + fontSize (px 11) color "#6b7280" cursor pointer ".metadata-json" ? do - fontSize (px 11) + fontSize (px 10) backgroundColor "#f3f4f6" - padding (px 8) (px 8) (px 8) (px 8) - borderRadius (px 4) (px 4) (px 4) (px 4) - marginTop (px 4) - maxHeight (px 200) + padding (px 4) (px 6) (px 4) (px 6) + borderRadius (px 2) (px 2) (px 2) (px 2) + marginTop (px 2) + maxHeight (px 150) overflow auto ".stage-claiming" |> ".activity-icon" ? do borderColor "#3b82f6" @@ -563,12 +566,12 @@ activityTimelineStyles = do responsiveStyles :: Css responsiveStyles = do query Media.screen [Media.maxWidth (px 600)] <| do - body ? fontSize (px 15) - ".container" ? padding (px 12) (px 12) (px 12) (px 12) + body ? fontSize (px 13) + ".container" ? padding (px 6) (px 8) (px 6) (px 8) ".navbar" ? do flexDirection column alignItems flexStart - padding (px 12) (px 12) (px 12) (px 12) + padding (px 6) (px 8) (px 6) (px 8) ".navbar-links" ? do width (pct 100) justifyContent center @@ -579,7 +582,7 @@ responsiveStyles = do Stylesheet.key "grid-template-columns" ("repeat(2, 1fr)" :: Text) ".detail-row" ? do flexDirection column - Stylesheet.key "gap" ("4px" :: Text) + Stylesheet.key "gap" ("2px" :: Text) ".detail-label" ? width auto ".filter-row" ? flexDirection column ".filter-group" ? width (pct 100) @@ -610,13 +613,13 @@ darkModeStyles = <> ".review-actions" ? do backgroundColor "#1f2937" - boxShadow (NE.singleton (bsColor (rgba 0 0 0 0.3) (shadow (px 0) (px 2)))) + borderColor "#374151" header ? do backgroundColor "#1f2937" - boxShadow (NE.singleton (bsColor (rgba 0 0 0 0.3) (shadow (px 0) (px 2)))) + borderColor "#374151" ".navbar" ? do backgroundColor "#1f2937" - boxShadow (NE.singleton (bsColor (rgba 0 0 0 0.3) (shadow (px 0) (px 2)))) + borderColor "#374151" ".navbar-brand" ? color "#60a5fa" ".navbar-link" ? color "#d1d5db" ".navbar-link" # hover ? backgroundColor "#374151" @@ -664,13 +667,13 @@ darkModeStyles = color "#f3f4f6" ".stats-section" <> ".summary-section" ? do backgroundColor "#1f2937" - boxShadow (NE.singleton (bsColor (rgba 0 0 0 0.3) (shadow (px 0) (px 2)))) + borderColor "#374151" ".stats-row" ? borderBottomColor "#374151" ".progress-bar" ? backgroundColor "#374151" ".progress-fill" ? backgroundColor "#60a5fa" ".activity-section" ? do backgroundColor "#1f2937" - boxShadow (NE.singleton (bsColor (rgba 0 0 0 0.3) (shadow (px 0) (px 2)))) + borderColor "#374151" ".activity-timeline" # before ? backgroundColor "#374151" ".activity-icon" ? do backgroundColor "#1f2937" |