HubUi-Y(开发版)/字体/其他功能
@font-face {
font-family: 'ChillRoundF';
src: url('https://cdn.jsdelivr.net/gh/145hub/145hub.github.io@master/ChillRoundFRegular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ChillRoundF';
src: url('https://cdn.jsdelivr.net/gh/145hub/145hub.github.io@master/ChillRoundFBold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
* {
font-family: ChillRoundF, Verdana, Arial, sans-serif;
}
div.PostStream-item[data-index="1"] article.CommentPost.Post header.Post-header ul:not(ul.PostUser-badges.badges):not(ul.UserCard-badges.badges, ul.UserCard-info)::after {
content: "沙发";
}
div.PostStream-item[data-index="2"] article.CommentPost.Post header.Post-header ul:not(ul.PostUser-badges.badges):not(ul.UserCard-badges.badges, ul.UserCard-info)::after {
content: "椅子";
}
div.PostStream-item[data-index="3"] article.CommentPost.Post header.Post-header ul:not(ul.PostUser-badges.badges):not(ul.UserCard-badges.badges, ul.UserCard-info)::after {
content: "地板";
}
div.PostStream-item[data-index="1"] article.CommentPost.Post.Post--by-start-user .Post-body,
div.PostStream-item[data-index="2"] article.CommentPost.Post.Post--by-start-user .Post-body,
div.PostStream-item[data-index="3"] article.CommentPost.Post.Post--by-start-user .Post-body {
clear: both;
}
@keyframes show-0 {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes show-1 {
0% {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes show-2 {
0% {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media @tablet-up {
.AfruxWidgets-Widget-content,
.GroupList-title,
.GroupList-UserList,
.DiscussionListItem-content,
.MasqueradeRoot,
.NotificationGroup,
.Post-body,
.SettingsPage,
.TagTiles>li,
.UserSecurityPage {
opacity: 0;
animation: show-2 .5s ease-out 0s forwards;
}
#header {
opacity: 0;
animation: show-1 .6s ease-out 0s forwards;
}
li.item-nav {
opacity: 0;
animation: show-2 .4s ease-out 0s forwards;
}
.Dropdown-menu--right {
opacity: 0;
animation: show-1 .4s forwards;
}
}
.Button {
transition: background-color .4s;
}
.Button.active,
.Button:active,
.open>.Button.Dropdown-toggle {
box-shadow: unset;
}
HubUi-X(可使用扩展代替)
.WelcomeHero{color:#fdfdfd;background:linear-gradient(160deg,var(--control-bg-shaded),var(--button-primary-bg-hover))}body,#app .App-content{background-color:var(--control-bg-light)}body::after{content:"Theme: HubUi-X by ThemeHub";display:block;text-align:center;margin-bottom:16px}
#drawer,#app-navigation,#header{& when (@config-colored-header = false){background-color:var(--control-bg-light)}}.AfruxWidgets-Widget-content{border-radius:@border-radius}
.item-like .Button--link .Button-label,.item-dislike .Button--link .Button-label,.item-reply .Button--link .Button-label{display:none}.item-like .Button:before{font-family:'Font Awesome 5 Free','Font Awesome 6 Free','Font Awesome 6 Pro';font-weight:600;font-size:14px;content:'\f164';vertical-align:-1px}.item-dislike .Button:before{font-family:'Font Awesome 5 Free','Font Awesome 6 Free','Font Awesome 6 Pro';font-weight:600;font-size:14px;content:'\f165';vertical-align:-3px}.item-reply .Button--link:before{font-family:'Font Awesome 5 Free','Font Awesome 6 Free','Font Awesome 6 Pro';font-weight:600;font-size:15px;content:'\f3e5';margin-right:4px;vertical-align:-2px}
.PostStream{border-radius:@border-radius;margin-top:4px;padding:4px 22px 4px 22px;& when (@config-dark-mode = false){background-color:rgba(255,255,255,0.8)}& when (@config-dark-mode = true){background-color:rgba(14,14,14,0.8)}}
.PostsUserPage{border-radius:@border-radius;margin-top:4px;padding:12px 22px 12px 22px;& when (@config-dark-mode = false){background-color:rgba(255,255,255,0.8)}& when (@config-dark-mode = true){background-color:rgba(14,14,14,0.8)}}
.DiscussionListItem{margin:8px 0px 8px 0px;border-radius:@border-radius !important;& when (@config-dark-mode = false){background-color:rgba(255,255,255,0.8)}& when (@config-dark-mode = true){background-color:rgba(14,14,14,0.8)}}
.DiscussionListItem-content{border-radius:@border-radius !important}
.DiscussionList-loadMore{margin-top:4px;@media @phone{margin:4px 8px}.Button{width:100%;height:100%}}
aside.DiscussionPage-list{padding:4px}.Slidable-content{margin-top:4px}@media @phone{.DiscussionListItem{margin:8px}}@media @tablet-up{li.item-nav{padding:2px 12px 2px 12px;border-radius:@border-radius;& when (@config-dark-mode = false){background-color:rgba(255,255,255,0.8)}& when (@config-dark-mode = true){background-color:rgba(14,14,14,0.8)}}
.SettingsPage,.UserSecurityPage,.MasqueradeRoot{border-radius:@border-radius;margin-top:4px;padding:12px 22px 12px 22px;& when (@config-dark-mode = false){background-color:rgba(255,255,255,0.8)}& when (@config-dark-mode = true){background-color:rgba(14,14,14,0.8)}}}.Badge{opacity:0.9;color:#fff}
.Hero-close{display:none}header.Hero.DiscussionHero,header.Hero.WelcomeHero{border-radius:@border-radius}.darkenBackground,.Hero{border-radius:@border-radius}.Hero{margin:12px}ul.NotificationGroup-content{&>li{margin:4px 8px;&>a{&.Notification{border-radius:@border-radius}&.unread .Notification-title:after{content:'';display:inline-block;width:1em;height:1em;border-radius:50%;background-color:var(--primary-color);transform:translateY(10%);margin-left:8px}}}}
.Composer{border-radius:12px 12px 0 0}.ComposerBody-loading{border-radius:12px}
@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}}
@border-radius:12px;.Dropdown-menu{border-radius:@border-radius;padding:1px;&>li{margin:4px;&>a,&>button,&>span{border-radius:@border-radius}}}.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='3' fill='none' stroke-dashoffset='' stroke-linecap='round' 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)}