From 22b034b0e3aab8b4d144752d09ab78ad0884e1e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E5=B0=8F=E7=99=BD=E5=93=A6?= Date: Sun, 31 Aug 2025 15:05:55 +0800 Subject: [PATCH] Create hubui.less --- resources/less/hubui.less | 242 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 242 insertions(+) create mode 100644 resources/less/hubui.less diff --git a/resources/less/hubui.less b/resources/less/hubui.less new file mode 100644 index 0000000..f2a277d --- /dev/null +++ b/resources/less/hubui.less @@ -0,0 +1,242 @@ +@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='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); +} +li { + border-radius: @border-radius !important; +} +.FlarumBlogOverview .BlogFeatured-list-item, +.FlarumBlogOverview .BlogFeatured-list-item-top .dataItem, +.FlarumBlog-Article-Content, +.FlarumBlog-Article-Comments, +.BlogSideWidget-item, +.FlarumBlog-Article-Author { + border-radius: @border-radius !important; + box-shadow: unset !important; +} +.BlogSideWidget { + border-radius: @border-radius !important; + box-shadow: unset !important; + padding-left: 8px; + padding-right: 8px; + padding-bottom: 8px; +} +.FlarumBlog-Article-Author-background, +.FlarumBlogItem .FlarumBlog-Article .FlarumBlog-Article-Container .FlarumBlog-Article-Image { + border-radius: @border-radius @border-radius 0 0 !important; + box-shadow: unset !important; +} +.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 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,1.0); + } + & when (@config-dark-mode = true) { + background-color: rgba(14,14,14,1.0); + } +} +.PostsUserPage { + border-radius: @border-radius; + margin-top: 4px; + padding: 12px 22px 12px 22px; + & when (@config-dark-mode = false) { + background-color: rgba(255,255,255,1.0); + } + & when (@config-dark-mode = true) { + background-color: rgba(14,14,14,1.0); + } +} +.DiscussionListItem { + margin: 8px 0px 8px 0px; + border-radius: @border-radius !important; + & when (@config-dark-mode = false) { + background-color: rgba(255,255,255,1.0); + } + & when (@config-dark-mode = true) { + background-color: rgba(14,14,14,1.0); + } +} +.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,1.0); + } + & when (@config-dark-mode = true) { + background-color: rgba(14,14,14,1.0); + } + } + .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,1.0); + } + & when (@config-dark-mode = true) { + background-color: rgba(14,14,14,1.0); + } + } +} +.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: 15px auto 0; + max-width: @screen-desktop-hd; + @media @desktop { + max-width: @screen-desktop; + } + @media @tablet { + max-width: @screen-tablet; + } + @media @phone { + max-width: calc(~"100% - 30px"); + margin-bottom: 15px; + } +} +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; + } +}