prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve the styling of URLs in highlighted text

Browse source
This commit is contained in:
Jackson Harper 2022-02-23 13:22:30 -08:00
parent 33f6f7c87c
commit f2e15e0754
2 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/web/components/tokens/stitches.config.ts
View file

@ -136,9 +136,9 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
// Semantic Colors
overlay: blackA.blackA9,
highlightBackground: 'rgb(255,234,159)',
highlightBackground: 'rgba(255, 210, 52, 0.65)',
highlight: '#FFD234',
highlightText: 'rgba(255, 210, 52, 0.65)',
highlightText: '#3D3D3D',
error: '#FA5E4A',
// Brand Colors
@ -180,7 +180,6 @@ export const darkTheme = createTheme(ThemeId.Dark, {
grayBgActive: '#4f4d4c',
grayTextContrast: '#D8D7D7',
grayBorder: 'rgba(255, 255, 255, 0.06)',
highlightText: '#867740',
graySolid: '#9C9B9A',
grayBgSubtle: grayDark.gray2,
@ -192,8 +191,9 @@ export const darkTheme = createTheme(ThemeId.Dark, {
// Semantic Colors
overlay: blackA.blackA9,
highlightBackground: 'rgb(255,234,159)',
highlightBackground: '#867740',
highlight: '#FFD234',
highlightText: 'white',
error: '#FA5E4A',
// Reader Colors
@ -296,7 +296,7 @@ export const globalStyles = globalCss({
// browser prefers this loaded here vs in the article styling css
'.article-inner-css': {
'::selection': {
background: '$highlightText',
background: '$highlightBackground',
}
}
})

14
packages/web/styles/articleInnerStyling.css
View file

@ -3,14 +3,16 @@
}
.highlight {
background-color: var(--colors-highlightText) !important;
color: var(--colors-highlightText);
background-color: var(--colors-highlightBackground);
cursor: pointer;
}
.highlight_with_note {
cursor: pointer;
border-bottom: 2px var(--colors-highlightText) solid;
color: var(--colors-highlightText);
border-bottom: 2px var(--colors-highlightBackground) solid;
border-radius: 2px;
cursor: pointer;
}
.article-inner-css .highlight_with_note .highlight_note_button {
@ -118,7 +120,11 @@ on smaller screens we display the note icon
}
.article-inner-css a {
color: #416ed2;
color: var(--font-color-readerFont);
}
.article-inner-css .highlight a {
color: var(--colors-highlightText);
}
.article-inner-css figure {