论坛专用css更新:
.buttonchat{
box-shadow: 0 0 5px #000;
transition:all 0.3s ease;z-index:998; position: fixed; right:12%;bottom:10%; width:75px; height:75px; border-radius:50%;color:white; background-color: #f7a1cf; border:none;
}
.buttonchat:hover{
box-shadow: 0 0 8px #000;
transition:all 0.3s ease;transform:scale(1.1);
}
.buttonchat:hover>chtip{
transition:all 0.3s ease;
display:none;
}
.buttonchat>chtip{
transition:all 0.3s ease;
font-size:36px;
}
.buttonchat:hover:after{
transition:all 0.3s ease;
font-weight:bold;
-webkit-text-stroke: 1px #754d63;
content:"Chat!";
}
.buttonchatL{
box-shadow: 0 0 5px #000;
transition:all 0.3s ease;z-index:997; position: fixed; right:12%;bottom:10%; width:50px; height:25px; border-radius:10% 75%;color:white; background-color: #f7a1cf; border:none;
transform: translateX(-35px) translateY(-75px) rotate(70deg);
}
.buttonchatL:hover{
box-shadow: 0 0 8px #000;
transition:all 0.3s ease;
transform: translateX(-32px) translateY(-75px) rotate(77deg);
}
.buttonchatL>chtipL{
transition:all 0.3s ease;
font-size:10px;
}
.buttonchatL:hover>chtipL{
transition:all 0.3s ease;
display:none;
}
.buttonchatL:hover:after{
transition:all 0.3s ease;
font-weight:bold;
-webkit-text-stroke: 1px #754d63;
content:"Disk!";
}
.buttonchatR{
box-shadow: 0 0 5px #000;
transition:all 0.3s ease;z-index:996; position: fixed; right:12%;bottom:10%; width:50px; height:25px; border-radius:75% 10%;color:white; background-color: #f7a1cf; border:none;
transform: translateX(10px) translateY(-75px) rotate(-70deg);
}
.buttonchatR:hover{
box-shadow: 0 0 8px #000;
transition:all 0.3s ease;
transform: translateX(7px) translateY(-75px) rotate(-77deg);
}
.buttonchatR>chtipR{
transition:all 0.3s ease;
font-size:10px;
}
.buttonchatR:hover>chtipR{
transition:all 0.3s ease;
display:none;
}
.buttonchatR:hover:after{
transition:all 0.3s ease;
font-weight:bold;
-webkit-text-stroke: 1px #754d63;
content:"Wiki!";
}
.DiscussionListItem-main mark {
background:#FFFF66 !important;
color: #f44336!important;
}
.ChatHeader
{
background-color: #f7a1cf !important; /* chat header color */
}
.ChatViewport
{
background-image: linear-gradient(to bottom right, #f7a1cf, #E0E0E0);
}
.ChatInput{
background-color: transparent; position:relative;bottom:-5%; width:100%;height:10px;margin:0 0 50px 0;
}
.cip{
position:relative;top:-20px;
}
.send{
top:-10px;
}
#open-file {
width: 100px;
height: 50px;
margin: auto;
border: 1px solid #5B5B5B;
border-radius: 5px;
background-color: #FCFCFC;
cursor: pointer;
}
#open-file:hover {
background-color: #F0F0F0;
}
.facog1{
color:#2c1c24; transition: all 0.2s;
}
.fa-volume-up{
color:#2c1c24; transition: all 0.2s;
}
.fa-bell-slash{
color:#2c1c24; transition: all 0.2s;
}
.fa-window-minimize{
color:#2c1c24; transition: all 0.2s;
}
.fa-angle-double-right{
color:#2c1c24; transition: all 0.2s;position:relative;top:-20px;
}
.fa-upload{
color:#2c1c24; transition: all 0.2s;position:relative;top:-20px;
}
.chlim{
position:relative;top:-20px;
}
.fa-cog:hover{
color:#62003e
}
.fa-volume-up:hover{
color:#62003e
}
.fa-bell-slash:hover{
color:#62003e
}
.fa-window-minimize:hover{
color:#62003e
}
.fa-angle-double-right:hover{
color:#f7a1cf;
}
.fa-upload:hover{
color:#f7a1cf;
}
.ChatList
{
background-color: #f7a1cf !important; /* chatlist background color */
.header {
background-color: #f7a1cf !important; /* chatlist header color */
}
.panel-preview
{
&:hover:not(.active) {
box-shadow: 0 0 0 3px #f7a1cf !important; /* primary hover color #94ddff*/
@media @phone {
background-color: #f7a1cf !important;
}
}
&.active {
box-shadow: 0 0 0 3px #ff6ac3 !important; /* primary color #94ddff*/
}
.message .sender {
color: #f7a1cf !important;
}
}
.panel-add {
&:hover {
box-shadow: 0 0 0 3px #f7a1cf !important;
}
}
}
@media @phone {
.NeonChatFrame.hidden {
margin-bottom: 52px;
}
}
@media (min-width:768px) and (max-width:999px) {
.Search-input input {
width: 30px;
max-width: 120px;
}
.Search.focused .Search-results,.Search.focused input {
width: 120px;
}
.Search.focused {
margin-left: auto
}
.Button-label {
.LinksButton-title {display:none}
}
}
@media (min-width:1000px) and (max-width:1099px) {
.Search-input input {
width: 120px;
max-width: 200px;
}
.Search.focused .Search-results,.Search.focused input {
width: 200px
}
.Search.focused {
margin-left: auto
}
}
@media (min-width:1100px) and (max-width:1399px) {
.Search-input input {
width: 225px;
max-width: 325px;
}
.Search.focused .Search-results,.Search.focused input {
width: 325px
}
.Search.focused {
margin-left: auto
}
}
@media (min-width:1400px) {
.Search-input input {
width: 325px;
max-width: 600px;
}
.Search.focused .Search-results,.Search.focused input {
width: 600px
}
.Search.focused {
margin-left: auto
}
}
@screen-desktop-hd-max: (@screen-desktop-hhd - 1);
@screen-desktop-hhd: 1400px;
@desktop-hd: ~"(min-width: @{screen-desktop-hd}) and (max-width: @{screen-desktop-hd-max})";
@desktop-hhd: ~"(min-width: @{screen-desktop-hhd})";
:root {--screen-desktop-hhd: 1400px;}
@media (min-width: 1400px){
.container {
width:1400px
}
}
.item-like .Button:before {
font-family:'Font Awesome 5 Free';
font-weight:600;
font-size:14px;
content:'\f164';
vertical-align:-1px;
margin-right:4px;
}
.item-reply .Button--link:before {
font-family:'Font Awesome 5 Free';
font-weight:600;
font-size:15px;
content:'\f3e5';
margin-right:4px;
vertical-align:-2px;
}
@media (min-width:999px){
.Post-actions {
position:absolute;right:1em;bottom:0.4em;
}
}
.item-bestAnswer{
button{
background-color:transparent;
color:#936c83;
font-weight:normal;
margin:0px 0px !important;
padding-left:13px;
padding-right:13px;
}
button:hover{background-color:transparent;color:#f7a1cf}
button:active{background-color:transparent;color:#f7a1cf}
.Button:before {
font-family:'Font Awesome 5 Free';
font-weight:600;
font-size:15px;
content:'\f5c0';
margin-right:4px;
vertical-align:-2px;
}
}
.Post{
.item-who-read-unread{
button{
i{position:relative;left:2px;}
span{display:none}
width: 36px;
text-align: center;
padding: 8px 0;
background: transparent;
border-radius: 18px;
}
button:hover{background-color:#181015}
button:active{background-color:#090608}
position:relative;
bottom:-3px;
left:-6px;
}
}
.AlertManager-alert{
.Alert--success{
-webkit-animation:fade-out 6s ease-in-out 0s 1 alternate forwards;
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.Alert--error{
-webkit-animation:fade-loop 1.5s ease-in-out 0s infinite alternate forwards;
}
@keyframes fade-loop {
0%{opacity: 1;}
100%{opacity: 0.5;}
}
}
.item-moreTags {
a:before {
position:absolute;
color:#936c83;
font-family:'Font Awesome 5 Free';
font-weight:600;
font-size:15px;
content:'\f141';
left:0px;
}
}
@media (min-height:100px) and (max-height:1000px) {
.IndexPage-nav .item-nav{
max-height: calc(~"100vh - 190px") !important;
height: calc(~"100vh - 190px") !important;
}
}
里面有很多内容都已经用不上了, 但是又不敢随便删. 应该没什么大问题.
比起之前的优化了fof/best-answer和clarkwinkelmann/flarum-ext-who-read的按钮效果, 并且针对各个可能的分辨率进行了大量优化.
同理, 其它flarum也能用, 但是分辨率优化还得看具体情况才好.
23.11.22更新: 调整了clarkwinkelmann/flarum-ext-who-read的显示效果.
24.1.11更新: 调整了sticky sidenav的显示效果.
