linstrom/frontend-reactive/app/styles/notes.css

87 lines
1.4 KiB
CSS

.note {
display: flex;
flex-direction: column;
width: fit-content;
height: fit-content;
/* align-items: center; */
border: 1px dashed green;
max-width: 50em;
padding: 0.5em;
background-color: #eee;
}
.note-user-header {
display: flex;
flex-direction: row;
border: 2px solid black;
width: fit-content;
padding-right: 0.5em;
}
.note-user-pfp {
border: 1px dashed red;
width: 3em;
height: 3em;
padding-bottom: 0.1em;
text-align: center;
}
.note-user-name-and-handle {
display: flex;
flex-direction: column;
/* align-items: center; */
padding: 0.2em;
}
.note-user-displayname {
padding-top: 0.1em;
margin: 0.1em;
}
.note-user-handle {
font-size: 85%;
color: #555;
margin: 0;
}
.note-timestamps-container {
padding-top: 0.2em;
padding-bottom: 0.2em;
}
.note-timestamp {
font-size: 0.8em;
margin: -0.1em;
color: gray;
}
.note-content {
display: flex;
flex-direction: column;
width: fit-content;
align-items: center;
border: 1px dashed red;
}
.note-content-text {
border: 1px dashed red;
margin-top: -0.08em;
margin-bottom: -0.08em;
padding: 0.2em;
}
.note-content-toggle {
margin-top: 0.3em;
margin-bottom: 0.3em;
cursor: default;
background-color: #ccc;
padding: 0.1em 0.3em 0.2em;
border-radius: 8px;
border: 1px solid #aaa;
}
.note-content-toggle:hover {
background-color: #aaa;
}