forked from Kieran/snort
chore: extract note styles to generic "card" class
This commit is contained in:
parent
50b9694419
commit
fd29dcd222
@ -1,23 +1,7 @@
|
||||
.note {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 16px;
|
||||
background-color: var(--note-bg);
|
||||
padding: 12px;
|
||||
min-height: 110px;
|
||||
}
|
||||
@media (min-width: 720px) {
|
||||
.note { margin-bottom: 24px; padding: 24px; }
|
||||
}
|
||||
|
||||
.note.thread {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.note .header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.note > .header .reply {
|
||||
font-size: var(--font-size-tiny);
|
||||
@ -43,12 +27,6 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.note > .footer {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.note > .note-creator {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
@ -115,7 +115,7 @@ export default function Note(props: NoteProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`note${highlight ? " active" : ""}${isThread ? " thread" : ""}`} ref={ref}>
|
||||
<div className={`note card${highlight ? " active" : ""}${isThread ? " thread" : ""}`} ref={ref}>
|
||||
{content()}
|
||||
</div>
|
||||
)
|
||||
|
@ -3,7 +3,7 @@ import ProfileImage from "Element/ProfileImage";
|
||||
|
||||
export default function NoteGhost(props: any) {
|
||||
return (
|
||||
<div className="note">
|
||||
<div className="note card">
|
||||
<div className="header">
|
||||
<ProfileImage pubkey="" />
|
||||
</div>
|
||||
|
@ -84,6 +84,28 @@ code {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 12px;
|
||||
border-radius: 16px;
|
||||
background-color: var(--note-bg);
|
||||
padding: 12px;
|
||||
}
|
||||
@media (min-width: 720px) {
|
||||
.card { margin-bottom: 24px; padding: 24px; }
|
||||
}
|
||||
|
||||
.card .header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card > .footer {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
|
Loading…
Reference in New Issue
Block a user