mirror of
https://github.com/flarum/core.git
synced 2025-07-31 05:30:38 +02:00
Major CSS revamp
- Get rid of Bootstrap (except we still rely on some JS) - Use BEM class names - Rework variables/theme config - Fix various bugs, including some on mobile The CSS is still not ideal – it needs to be cleaned up some more. But that can be a focus for after beta.
This commit is contained in:
83
less/forum/PostStream.less
Normal file
83
less/forum/PostStream.less
Normal file
@@ -0,0 +1,83 @@
|
||||
// ------------------------------------
|
||||
// Stream
|
||||
|
||||
.PostStream {
|
||||
@media @tablet-up {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.PostStream-item {
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid @control-bg;
|
||||
|
||||
@media @phone {
|
||||
margin: 0 -15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {opacity: 0.5}
|
||||
50% {opacity: 1}
|
||||
100% {opacity: 0.5}
|
||||
}
|
||||
@-webkit-keyframes blink {
|
||||
0% {opacity: 0.5}
|
||||
50% {opacity: 1}
|
||||
100% {opacity: 0.5}
|
||||
}
|
||||
.LoadingPost {
|
||||
.animation(blink 1s linear);
|
||||
.animation-iteration-count(infinite);
|
||||
}
|
||||
.fakeText {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
background: @control-bg;
|
||||
height: 12px;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
border-radius: @border-radius;
|
||||
|
||||
.Post-header & {
|
||||
height: 16px;
|
||||
width: 150px;
|
||||
|
||||
@media @phone {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// .item.highlight .post {
|
||||
// &:before {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// left: -30px;
|
||||
// top: -5px;
|
||||
// bottom: -5px;
|
||||
// width: 5px;
|
||||
// border-radius: @border-radius;
|
||||
// background: @fl-primary-color;
|
||||
// }
|
||||
// }
|
||||
@-webkit-keyframes pulsate {
|
||||
0% {-webkit-transform: scale(1)}
|
||||
50% {-webkit-transform: scale(1.02)}
|
||||
100% {-webkit-transform: scale(1)}
|
||||
}
|
||||
@keyframes pulsate {
|
||||
0% {transform: scale(1)}
|
||||
50% {transform: scale(1.02)}
|
||||
100% {transform: scale(1)}
|
||||
}
|
||||
.pulsate {
|
||||
.animation(pulsate 1s ease-in-out);
|
||||
.animation-iteration-count(infinite);
|
||||
}
|
||||
.flash {
|
||||
.animation(pulsate 0.2s ease-in-out);
|
||||
.animation-iteration-count(1);
|
||||
}
|
Reference in New Issue
Block a user