wasp/examples/thoughts/ext/ThoughtsPage.css

56 lines
1.2 KiB
CSS

.center-container {
min-height: 90vh;
margin-right: 300px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.thoughts-list {
display: flex;
flex-direction: column;
margin-top: 50px;
width: 100%;
align-items: center;
}
.thought-list-view {
margin-bottom: 20px;
}
.thought-list-view-text {
font-size: 16px;
width: 800px;
/* TODO: uncomment line below to see only the top of the text,
not the whole text. If we are going with this, we need a way to show
the full thought. */
/* max-height: 5em; */
overflow: hidden;
border: 0px;
border-radius: 2px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin: 10px;
padding: 10px 20px;
position: relative;
}
/* This makes the text at the end of the box "fade out" */
.thought-list-view-text:after {
content: "";
position: absolute; top: 0; bottom: 0; left: -15px; right: -15px;
box-shadow: 0 -15px 25px 5px white inset;
}
.thought-list-view-tags {
margin-left: 20px;
display: flex;
flex-wrap: wrap;
flex-flow: flex-start;
}
.thought-list-view-tags-tag {
margin-right: 10px;
}
.thought-list-view-tags-tag::before {
content: "#";
}