在 Flarum 后台管理外观 -> 自定义样式 中添加下方代码即可体验 Moderno 开发版 v2。
增加了胶囊形按钮、更大的圆角、浮动式移动端下拉菜单，修复了一些已知 bug。
版权归 ThemeHub 所有，禁止私自魔改并发布。
@border-radius: 20px;
.tooltip-arrow,
.Hero-close {
    display: none;
}
@keyframes dropdown-show {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes alert-show {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.Alert {
    animation: alert-show .4s forwards;
}
@media @phone {
    .Dropdown-menu {
        margin: 10px !important;
        border-radius: 16px !important;
        padding: 8px !important;
    }
}
.Dropdown-menu {
    border-radius: 16px;
    padding: 1px;
    &>li {
        margin: 4px;
        &>a,
        &>button,
        &>span {
            border-radius: 12px;
        }
    }
}
@media @tablet-up {
    .Dropdown-menu--right {
        opacity: 0;
        animation: dropdown-show .4s forwards;
    }
}
.Button {
    transition: background-color 0.4s;
}
.Button:active,
.Button.active,
.open>.Button.Dropdown-toggle {
    box-shadow: unset;
}
.LoadingIndicator {
    animation: none;
    border: none;
    border-radius: 0;
    background-color: currentColor;
    --animation-image: url("data:image/svg+xml,%3Csvg viewBox='5.963 5.963 21.940666 21.940666' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cg id='layer1'%3E%3Ccircle cx='16.933332' cy='16.933332' r='9.4701843' stroke='%23000' stroke-width='2' fill='none' stroke-dashoffset='' id='circlebar' stroke-dasharray='1 100'%3E %3CanimateTransform attributeName='transform' attributeType='AUTO' type='rotate' values='-95 16.933332 16.933332;355 16.933332 16.933332;985 16.933332 16.933332' dur='2s' repeatCount='indefinite' /%3E %3Canimate attributeName='stroke-dasharray' attributeType='AUTO' type='rotate' values='0.01 100;30 100;0.01 100' dur='2s' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask: var(--animation-image);
    mask: var(--animation-image);
}
.AfruxWidgets-Widget-content {
    border-radius: @border-radius !important;
    background: @control-bg;
}
.Post {
    border-radius: @border-radius;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 16px;
    margin-bottom: 16px;
    background: @control-bg;
}
.PostStream-item {
    &:not(:last-child) {
        border-bottom: none;
    }
}
.EventPost {
    background-color: transparent;
    .Post-footer {
        display: none;
    }
}
.ReplyPlaceholder {
    background: none;
    margin: auto;
    margin-top: 8px;
    width: 100%;
}
@media (min-width:992px) {
    .TagTiles>li {
        width: 30% !important;
        border-radius: @border-radius !important;
        margin: 15px;
    }
}
@media (max-width:991px) and (min-width:768px) {
    .TagTiles>li {
        width: 45% !important;
        border-radius: @border-radius !important;
        margin: 15px;
    }
}
@media (max-width:767px) {
    .TagTiles>li {
        border-radius: @border-radius !important;
        margin: 15px;
    }
}
.DiscussionListItem {
    margin: 0 0 8px;
    border-radius: @border-radius;
    background: @control-bg;
    @media @phone {
        margin: 8px !important;
    }
    &-controls .Dropdown-toggle {
        border-radius: @border-radius;
    }
}
.DiscussionListItem-content {
    box-shadow: unset !important;
    border-radius: @border-radius !important;
}
.Hero {
    margin: 15px auto 0;
    max-width: @screen-desktop-hd;
    border-radius: @border-radius;
    @media @desktop {
        max-width: @screen-desktop;
    }
    @media @tablet {
        max-width: @screen-tablet;
    }
    @media @phone {
        max-width: calc(~"100% - 30px");
        margin-bottom: 15px;
    }
}
.darkenBackground {
    border-radius: @border-radius;
}
.Post-body pre {
    font-size: 12px;
    padding: 0;
    border-left: 4px solid #929292;
    border-radius: 2px;
}
.Post-body blockquote {
    fontsize: 14px;
    padding: 10px;
    border: 0;
    border-left: 4px solid #0066d0;
    border-radius: 2px;
    & when (@config-dark-mode =false) {
        background: #f7f7f7;
        color: #444;
    }
    & when (@config-dark-mode =true) {
        background: #111111;
        color: #eee;
    }
}
.aaalert.aaerror .aainner,
.aaalert.aainfo .aainner,
.aaalert.aasuccess .aainner {
    font-size: 14px;
    text-align: left;
}
.aaalert.aaerror .aainner {
    border-left: 4px solid #ff5c5c !important;
}
.aaalert.aasuccess .aainner {
    border-left: 4px solid #58a400 !important;
}
.aaalert.aainfo .aainner {
    border-left: 4px solid #569ff7 !important;
}