akf-forum/public/css/thread.css

203 lines
2.8 KiB
CSS
Raw Normal View History

2022-08-28 21:08:33 +03:00
.title {
color: #414141;
font-weight: 700;
font-size: 36px;
2022-03-13 16:16:46 +03:00
}
.date {
2022-08-28 21:08:33 +03:00
color: gray;
2022-03-13 16:16:46 +03:00
}
.message {
2022-08-28 21:08:33 +03:00
max-width: 800px;
box-shadow: 0 0 5px 0 #c3c3c3;
margin: 10px auto;
padding: 20px;
display: flex;
gap: 10px;
position: relative;
2022-03-13 16:16:46 +03:00
}
.message .left {
2022-08-28 21:08:33 +03:00
text-align: center;
border-right: 2px solid #d9d9d9;
2022-03-13 16:16:46 +03:00
}
.message .left img {
2022-08-28 21:08:33 +03:00
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 5px;
2022-03-13 16:16:46 +03:00
}
.message .left .username {
color: #555;
2022-03-13 16:16:46 +03:00
}
.content {
2022-08-28 21:08:33 +03:00
width: 70%;
2022-03-13 16:16:46 +03:00
}
.reactions {
position: absolute;
right: 20px;
bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
2022-08-28 21:08:33 +03:00
}
.reactions div {
display: flex;
align-items: center;
gap: 5px;
padding: 4px;
2022-08-28 21:08:33 +03:00
color: #747474;
cursor: pointer;
transition: color 0.3s ease;
2022-08-28 21:08:33 +03:00
}
.reactions div:hover {
color: #151515;
2022-03-22 21:25:09 +03:00
}
.reactions div i {
font-size: 22px;
2022-03-22 21:25:09 +03:00
}
2022-08-28 21:08:33 +03:00
.pagination {
2022-08-28 21:08:33 +03:00
box-shadow: 0 0 5px 0 #c3c3c3;
margin: 10px auto;
padding: 8px;
display: flex;
justify-content: space-between;
align-items: center;
max-width: 400px;
gap: 10px;
position: relative;
2022-03-22 21:25:09 +03:00
}
.pagination .back,
2022-08-28 21:08:33 +03:00
.pagination .after {
color: #747474;
font-size: 26px;
cursor: pointer;
2022-03-22 21:25:09 +03:00
}
.pagination .numbers {
display: flex;
align-items: center;
gap: 5px;
2022-08-28 21:08:33 +03:00
}
2022-08-28 21:08:33 +03:00
.pagination .number {
color: #747474;
font-size: 22px;
border: 0 0 5px #747474;
padding: 8px;
border-radius: 2px;
font-weight: 600;
cursor: pointer;
margin: 8px;
2022-08-28 21:08:33 +03:00
}
.pagination .number.active {
color: #4d18e6;
font-weight: 700;
2022-08-11 17:55:48 +03:00
}
2022-03-22 21:25:09 +03:00
.dots {
position: absolute;
right: 20px;
font-size: 22px;
top: 10px;
color: #747474;
cursor: pointer;
2022-03-22 21:25:09 +03:00
}
.dots-menu {
position: absolute;
top: 50px;
right: 0;
background-color: #e6e6e6;
width: 100px;
text-align: center;
display: none;
2022-03-26 23:28:10 +03:00
}
.dots-menu.active {
display: block;
2022-08-28 21:08:33 +03:00
}
2022-03-26 23:28:10 +03:00
.dots-menu a {
display: block;
margin: 8px;
cursor: pointer;
2022-08-31 15:27:49 +03:00
}
.dots-menu a:hover:nth-child(1){
color:#e70000}
.dots-menu a:hover:nth-child(2){
color:#4d18e6}
/* Media Query */
@media(max-width:980px){
.message{
margin: 10px 20px;
max-width: 100%;
flex-direction:column;
position:relative;
}
.message .left{
padding: 40px;
border:none;
border-bottom: 2px solid #d9d9d9;
}
.message .left img{
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 5px;
position: absolute;
left: 20px;
top: 20px;
}
.message .left .username{
position: absolute;
top: 20px;
left: 80px;
}
.message .date:nth-of-type(3){
position: absolute;
right: 20px;
top: 20px;
}
.message .date:nth-of-type(2){
position: absolute;
right: 20px;
top: 40px;
}
.dots{
position: absolute;
right: auto;
top: 70px;
left: 40px;
}
.dots-menu{
position: absolute;
left: 70px;
top: 60px;
width: 120px;
}
.dots-menu.active{
display:flex;
}
}