经过一个月的努力与测试，我们的神龙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代码和页眉，汉字部分可自定义，本代码为试用版，正式版请联系版主索要密钥和完整代码!
