187 lines
11 KiB
CSS
187 lines
11 KiB
CSS
body {
|
|
background-color: var(--secondary);
|
|
}
|
|
|
|
#posts, #create {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.post, .create {
|
|
width: 40em;
|
|
height: fit-content;
|
|
background-color: var(--primary);
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
.post {
|
|
padding-bottom: 0;
|
|
color: var(--text);
|
|
}
|
|
|
|
.create {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.create button {
|
|
all: unset;
|
|
background-color: var(--secondary);
|
|
border-radius: 3em;
|
|
margin-left: 1em;
|
|
flex: 1;
|
|
}
|
|
|
|
.create button:hover {
|
|
background-color: var(--hover);
|
|
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: var(--medium);
|
|
margin: 3px
|
|
}
|
|
|
|
.postbuttons>span:hover {
|
|
background-color: var(--hover);
|
|
}
|
|
|
|
.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: var(--primary);
|
|
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;
|
|
background-color: transparent;
|
|
color: var(--text);
|
|
}
|
|
|
|
.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: var(--secondary);
|
|
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: var(--secondary);
|
|
font-family: sfpro;
|
|
} |