Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Added basic styles

Browse source
This commit is contained in:
Sodbileg Gansukh 2023-04-19 14:44:19 +01:00 committed by Elena Baidakova
parent 725956bc8b
commit 248d5833e4
2 changed files with 66 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
ghost/announcement-bar/src/components/AnnouncementBar.css
View file

@ -1,3 +1,66 @@
.gh-announcement-bar { .gh-announcement-bar {
background: red; top: 0;
right: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
height: 48px;
font-size: 1.5rem;
}
.gh-announcement-bar a {
color: inherit !important;
}
.gh-announcement-bar.light {
background-color: #fff;
color: #15171a;
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.1);
}
.gh-announcement-bar.accent {
background-color: var(--ghost-accent-color);
color: #fff;
}
.gh-announcement-bar.dark {
background-color: #15171a;
color: #fff;
}
.gh-announcement-bar a {
color: #fff;
font-weight: 700;
text-decoration: underline;
}
.gh-announcement-bar.light a {
color: var(--ghost-accent-color) !important;
}
.gh-announcement-bar button {
position: absolute;
top: 50%;
right: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-top: -16px;
width: 32px;
height: 32px;
padding: 0;
background-color: transparent;
border: 0;
color: #fff;
cursor: pointer;
}
.gh-announcement-bar.light button {
color: #888;
}
.gh-announcement-bar svg {
width: 16px;
height: 16px;
} }

5
ghost/announcement-bar/src/components/AnnouncementBar.js
View file

@ -6,10 +6,9 @@ export function AnnouncementBar({settings}) {
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
const [data, setData] = React.useState({content: '<p>Content with <a href="https://ghost.org/">link</a></p>'}); const [data, setData] = React.useState({content: '<p>Content with <a href="https://ghost.org/">link</a></p>'});
const accentColor = settings?.accent_color;
return ( return (
<div className="gh-announcement-bar" style={{backgroundColor: accentColor}}> <div className="gh-announcement-bar">
<div dangerouslySetInnerHTML={{__html: data.content}}></div> <div className="gh-announcement-bar-content" dangerouslySetInnerHTML={{__html: data.content}}></div>
</div> </div>
); );
} }