182 lines
11 KiB
CSS
182 lines
11 KiB
CSS
|
body {
|
||
|
|
background-color: #f0f2f5;
|
||
|
|
}
|
||
|
|
|
||
|
|
#posts {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post, .create {
|
||
|
|
width: 40em;
|
||
|
|
height: fit-content;
|
||
|
|
background-color: white;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 15px;
|
||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
|
||
|
|
margin-bottom: 1.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.post {
|
||
|
|
padding-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.create {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
}
|
||
|
|
|
||
|
|
.create button {
|
||
|
|
all: unset;
|
||
|
|
background-color: #f0f2f5;
|
||
|
|
border-radius: 3em;
|
||
|
|
margin-left: 1em;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.create button:hover {
|
||
|
|
background-color: #e4e6e8;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.create button p {
|
||
|
|
margin-left: 1em;
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.postheader {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
margin-bottom: .5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.postbuttons {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
}
|
||
|
|
|
||
|
|
.postbuttons>span {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 7px;
|
||
|
|
border-radius: 5px;
|
||
|
|
color: #606770;
|
||
|
|
margin: 3px
|
||
|
|
}
|
||
|
|
|
||
|
|
.postbuttons>span:hover {
|
||
|
|
background-color: #e4e6e8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.postname {
|
||
|
|
margin-left: 1em;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icons {
|
||
|
|
background-image: url('data:image/png;base64,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
|
||
|
|
display: inline-block;
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
background-size: auto;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
margin-right: .5em;
|
||
|
|
filter: invert(39%) sepia(21%) saturate(200%) saturate(109.5%) hue-rotate(174deg) brightness(94%) contrast(86%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.blue {
|
||
|
|
filter: invert(39%) sepia(57%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(147.75%) hue-rotate(202deg) brightness(97%) contrast(96%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.like {
|
||
|
|
background-position: 0px -132px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comm {
|
||
|
|
background-position: 0px -113px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.createpost {
|
||
|
|
position: relative;
|
||
|
|
background-color: white;
|
||
|
|
width: 450px;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: .5em;
|
||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.createpost .postheader {
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.createpost textarea {
|
||
|
|
border: none;
|
||
|
|
resize: none;
|
||
|
|
outline: none;
|
||
|
|
font-family: sfpro;
|
||
|
|
font-size: 24px;
|
||
|
|
margin-top: 10px;
|
||
|
|
width: 100%;
|
||
|
|
height: 120px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.createpost>span {
|
||
|
|
margin-top: -10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.primary {
|
||
|
|
margin: 0;
|
||
|
|
width: calc(100% - 20px);
|
||
|
|
font-family: sfprobold;
|
||
|
|
height: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.close {
|
||
|
|
top: 1em;
|
||
|
|
right: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comment {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comment p, .post p {
|
||
|
|
word-break: break-all;
|
||
|
|
white-space: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comment>span {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
margin-left: 10px;
|
||
|
|
background-color: #f0f2f5;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 10px;
|
||
|
|
padding-right: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.larger {
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.newcomment {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
}
|
||
|
|
|
||
|
|
#comments input {
|
||
|
|
all: unset;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 10px;
|
||
|
|
width: calc(100% - 20px);
|
||
|
|
background-color: #f0f2f5;
|
||
|
|
font-family: sfpro;
|
||
|
|
}
|