Skip to content

Commit

Permalink
Add external link icons to messages
Browse files Browse the repository at this point in the history
Implement CSS styles to display external link icons next to links in messages. Use a GitHub icon for GitHub links and a custom "W" icon for Wikipedia links to clearly indicate external sources. No modifications to JavaScript or TypeScript files were made.
[skip gpt_engineer]
  • Loading branch information
lovable-dev[bot] committed Jan 30, 2025
1 parent 1e35120 commit 57f3cc2
Showing 1 changed file with 41 additions and 9 deletions.
50 changes: 41 additions & 9 deletions src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -73,18 +73,49 @@

.chat-message a {
@apply text-blue-300;
position: relative;
padding-right: 1.2em;
}

&:hover {
@apply text-blue-600;
}
/* External link icon for general links */
.chat-message a[href^="http"]::after {
content: "↗";
position: absolute;
right: 0;
top: -0.1em;
font-size: 0.9em;
@apply text-muted-foreground;
}

&:visited {
@apply text-purple-300;
}
/* GitHub icon */
.chat-message a[href*="github.com"]::after {
content: "G";
font-family: monospace;
font-weight: bold;
font-size: 0.8em;
top: 0;
}

&:visited:hover {
@apply text-purple-600;
}
/* Wikipedia icon */
.chat-message a[href*="wikipedia.org"]::after {
content: "W";
font-family: "Times New Roman", serif;
font-style: italic;
font-weight: bold;
font-size: 0.9em;
top: 0;
}

.chat-message a:hover {
@apply text-blue-600;
}

.chat-message a:visited {
@apply text-purple-300;
}

.chat-message a:visited:hover {
@apply text-purple-600;
}

.chat-message > p {
Expand Down Expand Up @@ -199,3 +230,4 @@ details > details {
.hljs-number {
@apply text-orange-400;
}

0 comments on commit 57f3cc2

Please sign in to comment.