Skip to content

Commit 7382aa6

Browse files
dafidafi
committed
created callout
1 parent 9021bd5 commit 7382aa6

File tree

3 files changed

+117
-3
lines changed

3 files changed

+117
-3
lines changed

‎css/input.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,3 +127,61 @@ td.file-legend-merged {
127127
padding-right: 0.35em;
128128
font-weight: 900;
129129
}
130+
131+
@layer components {
132+
.finder-callout {
133+
display: flex;
134+
flex-direction: column;
135+
gap: calc(var(--spacing) * 3);
136+
padding: calc(var(--spacing) * 6) calc(var(--spacing) * 7);
137+
border: 1px solid var(--color-brand-200);
138+
background: linear-gradient(135deg, var(--color-brand-50), var(--color-white));
139+
border-radius: var(--radius-2xl);
140+
color: var(--color-slate-900);
141+
}
142+
143+
.finder-callout__header {
144+
display: flex;
145+
align-items: center;
146+
gap: calc(var(--spacing) * 2);
147+
}
148+
149+
.finder-callout__icon {
150+
display: grid;
151+
place-items: center;
152+
width: 2.25rem;
153+
height: 2.25rem;
154+
border-radius: 9999px;
155+
background: var(--color-brand-600);
156+
color: var(--color-white);
157+
box-shadow: 0 12px 28px rgba(4, 120, 87, 0.25);
158+
}
159+
160+
.finder-callout__title {
161+
display: flex;
162+
align-items: center;
163+
min-height: 2.25rem;
164+
margin: 0 !important;
165+
font-size: var(--text-xl);
166+
line-height: var(--text-xl--line-height);
167+
font-weight: var(--font-weight-bold);
168+
color: var(--color-brand-800);
169+
}
170+
171+
.finder-callout p {
172+
margin: 0 !important;
173+
color: var(--color-slate-700);
174+
}
175+
176+
.finder-callout a {
177+
font-weight: var(--font-weight-semibold);
178+
color: var(--color-brand-700);
179+
text-decoration: underline;
180+
text-decoration-thickness: 2px;
181+
text-underline-offset: 0.2em;
182+
}
183+
184+
.finder-callout a:hover {
185+
color: var(--color-brand-800);
186+
}
187+
}

‎css/theme.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1538,6 +1538,57 @@ td.file-legend-merged {
15381538
padding-right: 0.35em;
15391539
font-weight: 900;
15401540
}
1541+
@layer components {
1542+
.finder-callout {
1543+
display: flex;
1544+
flex-direction: column;
1545+
gap: calc(var(--spacing) * 3);
1546+
padding: calc(var(--spacing) * 6) calc(var(--spacing) * 7);
1547+
border: 1px solid var(--color-brand-200);
1548+
background: linear-gradient(135deg, var(--color-brand-50), var(--color-white));
1549+
border-radius: var(--radius-2xl);
1550+
color: var(--color-slate-900);
1551+
}
1552+
.finder-callout__header {
1553+
display: flex;
1554+
align-items: center;
1555+
gap: calc(var(--spacing) * 2);
1556+
}
1557+
.finder-callout__icon {
1558+
display: grid;
1559+
place-items: center;
1560+
width: 2.25rem;
1561+
height: 2.25rem;
1562+
border-radius: 9999px;
1563+
background: var(--color-brand-600);
1564+
color: var(--color-white);
1565+
box-shadow: 0 12px 28px rgba(4, 120, 87, 0.25);
1566+
}
1567+
.finder-callout__title {
1568+
display: flex;
1569+
align-items: center;
1570+
min-height: 2.25rem;
1571+
margin: 0 !important;
1572+
font-size: var(--text-xl);
1573+
line-height: var(--text-xl--line-height);
1574+
font-weight: var(--font-weight-bold);
1575+
color: var(--color-brand-800);
1576+
}
1577+
.finder-callout p {
1578+
margin: 0 !important;
1579+
color: var(--color-slate-700);
1580+
}
1581+
.finder-callout a {
1582+
font-weight: var(--font-weight-semibold);
1583+
color: var(--color-brand-700);
1584+
text-decoration: underline;
1585+
text-decoration-thickness: 2px;
1586+
text-underline-offset: 0.2em;
1587+
}
1588+
.finder-callout a:hover {
1589+
color: var(--color-brand-800);
1590+
}
1591+
}
15411592
@property --tw-translate-x {
15421593
syntax: "*";
15431594
inherits: false;

‎finder.md‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,14 @@ subtitle: Launch VisualDiffer directly from macOS Finder
1111
You can run VisualDiffer directly from macOS Finder by selecting two files or two folders.
1212
You don't need to run VisualDiffer and then select items to compare; if you are in Finder you can do it from there.
1313

14-
<div style="border: 1px dashed; padding:0 10px">
15-
<h2>The macOS Finder integration requires a script not present on standard installation; you must download it from the VisualDiffer GitHub repository</h2>
16-
<p>You can download the script <a href="https://github.com/visualdiffer/scripts">here</a></p>
14+
<div class="finder-callout" role="note" aria-label="Finder integration download">
15+
<div class="finder-callout__header">
16+
<div class="finder-callout__icon">
17+
<i class="fa-solid fa-download" aria-hidden="true"></i>
18+
</div>
19+
<h2 class="finder-callout__title">Download the Finder helper before you start</h2>
20+
</div>
21+
<p class="finder-callout__text">The Finder integration relies on a helper script that is not bundled with VisualDiffer. Grab it from the VisualDiffer GitHub repository <a href="https://github.com/visualdiffer/scripts">here</a>.</p>
1722
</div>
1823

1924
# [Compare with VisualDiffer](#compare_with_visualdiffer)

0 commit comments

Comments
 (0)