dify-docs/style.css at main · langgenius/dify-docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
body {
  text-autospace: normal;
}

/* Hide the top tab row on the landing pages (root + per-language /{lang}/home).
   Mintlify updates <html data-current-path> on client-side nav. */
html[data-current-path="/"] .nav-tabs,
html[data-current-path="/en/home"] .nav-tabs,
html[data-current-path="/zh/home"] .nav-tabs,
html[data-current-path="/ja/home"] .nav-tabs {
  display: none;
}

/* `hidden: true` does not remove a listed page from Mintlify's client-rendered
   sidebar, so hide the landing pages' sidebar entries by href. They stay in the
   nav (so the language switcher maps them across languages) but no longer show
   in the sidebar. */
#sidebar-content a[href="/en/home"],
#sidebar-content a[href="/zh/home"],
#sidebar-content a[href="/ja/home"],
#sidebar-content *:has(> a[href="/en/home"]),
#sidebar-content *:has(> a[href="/zh/home"]),
#sidebar-content *:has(> a[href="/ja/home"]) {
  display: none;
}

/* Use/Deploy overview pages (frame mode): text hero + centered equal-card grid.
   Layout only; colors come from Tailwind classes in the MDX so dark mode works. */
.uo-wrap {
  max-width: 64rem;
  margin: 0 auto;
  padding: 2.5rem 2rem 4rem;
}

.uo-hero {
  display: flex;
  gap: 40px;
  align-items: center;
  margin: 0 0 48px;
}

.uo-hero-text {
  flex: 1 1 100%;
}

.uo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
}

.uo-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0060FF;
  color: #fff !important;
  padding: 8px 18px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none !important;
  border: none !important;
}

.uo-cta:hover {
  background: #0034FF;
}

/* Secondary links beside the primary CTA: inline and dot-separated (no box, so
   they don't echo the cards below). Medium weight at body size so they read
   clearly rather than thin. Rest color flows from the theme (dark-mode safe). */
.uo-secondary {
  font-weight: 500;
}

.uo-secondary a {
  text-decoration: none !important;
}

.uo-secondary a:hover {
  color: #0060FF;
}

/* Equal-card grid, three per row (each card spans two of six columns).
   With six items it forms a clean 3x2; with five, the rule below centers
   the two cards of the final row. */
.uo-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.uo-grid > * {
  grid-column: span 2;
  margin: 0;
}

.uo-grid > :nth-child(4):nth-last-child(2) {
  grid-column: 2 / span 2;
}

/* Link row inside the Get Help card (a native Card without href). */
.uo-help-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 10px;
  font-weight: 500;
}

@media (max-width: 900px) {
  .uo-grid {
    grid-template-columns: 1fr;
  }

  .uo-grid > *,
  .uo-grid > :nth-child(4):nth-last-child(2) {
    grid-column: auto;
  }
}