经过一个月的努力与测试，我们的神龙UI(TionLoong UI)终于发布了第一代稳定版，我们没有忘记「大道至简」的使命，但在此基础上脱离了对Hubui-X的依赖，拥有了完全独立自主的著作权，同时做了以下调整：
▪修复了PC端顶部侧边栏换行的问题
▪增添了彩条口号
▪修复了易乱码的bug
▪对字体的兼容性进行优化，目前可以兼容大部分在线字体库
▪进一步提升了流畅度
▪修复了UI易掉的BUG
.Hero-title { animation: my-face 5s infinite ease-in-out; display: inline-block; margin: 0 5px; } @keyframes my-face { 2% { transform: translate(0,1.5px) rotate(1.5deg); } 4% { transform: translate(0,-1.5px) rotate(-0.5deg); } 6% { transform: translate(0,1.5px) rotate(-1.5deg); } 8% { transform: translate(0,-1.5px) rotate(-1.5deg); } 10% { transform: translate(0,2.5px) rotate(1.5deg); } 12% { transform: translate(0,-0.5px) rotate(1.5deg); } 14% { transform: translate(0,-1.5px) rotate(1.5deg); } 16% { transform: translate(0,-0.5px) rotate(-1.5deg); } 18% { transform: translate(0,0.5px) rotate(-1.5deg); } 20% { transform: translate(0,-1.5px) rotate(2.5deg); } 22% { transform: translate(0,0.5px) rotate(-1.5deg); } 24% { transform: translate(0,1.5px) rotate(1.5deg); } 26% { transform: translate(0,0.5px) rotate(0.5deg); } 28% { transform: translate(0,0.5px) rotate(1.5deg); } 30% { transform: translate(0,-0.5px) rotate(2.5deg); } 32% { transform: translate(0,1.5px) rotate(-0.5deg); } 34% { transform: translate(0,1.5px) rotate(-0.5deg); } 36% { transform: translate(0,-1.5px) rotate(2.5deg); } 38% { transform: translate(0,1.5px) rotate(-1.5deg); } 40% { transform: translate(0,-0.5px) rotate(2.5deg); } 42% { transform: translate(0,2.5px) rotate(-1.5deg); } 44% { transform: translate(0,1.5px) rotate(0.5deg); } 46% { transform: translate(0,-1.5px) rotate(2.5deg); } 48% { transform: translate(0,-0.5px) rotate(0.5deg); } 50% { transform: translate(0,0.5px) rotate(0.5deg); } 52% { transform: translate(0,2.5px) rotate(2.5deg); } 54% { transform: translate(0,-1.5px) rotate(1.5deg); } 56% { transform: translate(0,2.5px) rotate(2.5deg); } 58% { transform: translate(0,0.5px) rotate(2.5deg); } 60% { transform: translate(0,2.5px) rotate(2.5deg); } 62% { transform: translate(0,-0.5px) rotate(2.5deg); } 64% { transform: translate(0,-0.5px) rotate(1.5deg); } 66% { transform: translate(0,1.5px) rotate(-0.5deg); } 68% { transform: translate(0,-1.5px) rotate(-0.5deg); } 70% { transform: translate(0,1.5px) rotate(0.5deg); } 72% { transform: translate(0,2.5px) rotate(1.5deg); } 74% { transform: translate(0,-0.5px) rotate(0.5deg); } 76% { transform: translate(0,-0.5px) rotate(2.5deg); } 78% { transform: translate(0,-0.5px) rotate(1.5deg); } 80% { transform: translate(0,1.5px) rotate(1.5deg); } 82% { transform: translate(0,-0.5px) rotate(0.5deg); } 84% { transform: translate(0,1.5px) rotate(2.5deg); } 86% { transform: translate(0,-1.5px) rotate(-1.5deg); } 88% { transform: translate(0,-0.5px) rotate(2.5deg); } 90% { transform: translate(0,2.5px) rotate(-0.5deg); } 92% { transform: translate(0,0.5px) rotate(-0.5deg); } 94% { transform: translate(0,2.5px) rotate(0.5deg); } 96% { transform: translate(0,-0.5px) rotate(1.5deg); } 98% { transform: translate(0,-1.5px) rotate(-0.5deg); } 0%,100% { transform: translate(0,0) rotate(0deg); } } @border-radius: 12px; .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); } #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-weight:600; font-size:14px; content:'\f164'; vertical-align:-1px; } .item-dislike .Button:before { font-family:'Font Awesome 5 Free'; font-weight:600; font-size:14px; content:'\f165'; vertical-align:-3px; } .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; } .PostStream { border-radius: @border-radius; margin: 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: 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; } 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); } } } .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; } .Dropdown-menu { border-radius: @border-radius; padding: 1px; &>li { margin: 4px; &>a, &>button { border-radius: @border-radius; } } } 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; } } .Button:active, .Button.active, .open>.Button.Dropdown-toggle { box-shadow: unset; } body { font-family: LXGW WenKai Screen, serif; } h1, h2, h3, h4, .TagsLabel, .Button, .DiscussionListItem-count, .item-discussion-views { font-family: LXGW WenKai Screen, sans-serif; } .Search-input input { width: 185px; } .IndexPage-toolbar::after { content: "神龙UI焕然一新 | 全新样式现已开启"; padding: 10px; color: #ffffff; border-radius: 50px; text-align: center; font-size: 16px; background: linear-gradient(135deg, #29c7ac, #6699ff); display: block; margin: 5px 0; } @media (max-width: 768px) { .IndexPage-toolbar::after { display: none; } } @media (min-width: 768px) and (max-width: 1099px) { .Header-primary .Header-controls { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .Header-primary:after { content: " > "; margin-left: 20px; } .Header-primary:hover { padding-right: 30px; padding-bottom: 20px; } .Header-primary:hover .Header-controls { transition: max-width 1s; max-width: 1000px; overflow: unset; animation: delay-overflow-unset 1s; } @keyframes delay-overflow-unset { from { overflow: hidden; } to { overflow: unset; } } .Header-primary:hover:after { content: ""; } .Header-primary:hover + .Header-secondary { white-space: nowrap; overflow: hidden; margin-right: 20px; float: unset; } } .Header-secondary .item-session button { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
`

⚠︎注意！
请确保您已关闭其它主题拓展，清空原css/less代码和页眉，汉字部分可自定义，本代码为试用版，正式版请联系版主索要密钥和完整代码!

Image description