Files
astuto/app/javascript/stylesheets/components/Post.scss
Ruben Waterman 08de979b45 Add dark-mode support (#24)
* add dark-mode support

* make improvements as suggested by riggraz

* fix some dark theme styles

Co-authored-by: Riccardo Graziosi <riccardo.graziosi97@gmail.com>
2020-07-17 18:51:34 +02:00

143 lines
2.1 KiB
SCSS

.pageContainer {
@extend
.d-flex,
.justify-content-between,
.align-items-start;
flex-direction: row;
@include media-breakpoint-down(sm) {
flex-direction: column;
.postAndCommentsContainer { width: 100%; }
}
.sidebar {
.postUpdateListContainer {
@extend .sidebarCard;
.postUpdateList {
@extend .w-100;
max-height: 250px;
overflow-y: scroll;
.postUpdateListItem {
@extend
.d-flex,
.flex-column,
.p-2,
.my-1;
.postUpdateListItemHeader {
@extend .d-flex;
span {
@extend
.ml-2;
font-weight: 600;
vertical-align: middle;
}
}
.postUpdateListItemBody {
@extend .m-0;
font-size: 15px;
}
}
}
}
.likeListContainer {
@extend .sidebarCard;
.likeList {
@extend .w-100;
max-height: 170px;
overflow-y: scroll;
.likeListItem {
@extend
.p-2,
.my-1;
.likeListItemName {
@extend .ml-2;
}
}
}
}
}
.postAndCommentsContainer {
@extend
.card,
.flex-grow-1,
.p-3,
.mb-3;
.postInfo {
@extend .d-flex;
span {
@extend .mr-2;
}
}
.postHeader {
@extend
.d-flex;
a {
@extend
.ml-1;
line-height: 1em;
}
}
.postSettings {
@extend
.d-flex,
.justify-content-between;
.selectPicker {
@extend
.custom-select,
.mx-2;
}
}
.postDescription {
@extend
.my-3;
color: $astuto-black;
}
}
}
@media (prefers-color-scheme: dark) {
.postDescription {
color: white !important;
}
.badgeLight {
color: white;
}
.postAndCommentsContainer .postSettings .selectPicker {
background-color: #282828 !important;
color: white !important;
}
.postAndCommentsContainer .postHeader a {
color: white;
}
}