此样式为试用版，若要免费获取完整版，请联系 14569。
演示站点
要使用此样式，请在 外观 > 自定义样式 中添加代码：
@header-bg-light: saturate(average(average(fade(@config-primary-color, 30%), white), @layer-1-color), 30%);
@header-bg-dark: saturate(average(average(fade(@config-primary-color, 30%), black), @layer-1-color), 30%);
@backdrop: ~"#0000004D";
@SurfaceStrokeColorDefault: fade(#757575, 40%);
@shadow-outline-normal: 0 6px 18px rgba(14,21,47,0.1),0 -2px 6px rgba(14,21,47,0.1);
@shadow-outline-window: 0 6px 18px rgba(14,21,47,0.1),0 -2px 6px rgba(14,21,47,0.1);
.define-colors(@config-dark-mode);
.define-colors(false) {
@body-bg: lighten(average(average(fade(@config-primary-color, 30%), white), @layer-2-color), 1%);
@Switch-border-color: @Fluent-border;
@layer-1-color: #e8e8e8;
@layer-2-color: #f9f9f9;
@layer-3-color: #fdfdfd;
@obj-color: lighten(saturate(average(fade(@config-primary-color, 2%), #fbfbfb), 30%), 1%);
@LayerFillColorDefault: ~"#ffffff80";
@CardBackgroundFillColorDefault: fade(white, 70%);
@ExpanderHeaderBackground: ~"#00000009";
@obj-title-color: #191a1a;
@Fluent-border: fade(black, 5.9%);
@details-second-font-color: #5e5e5e;
@titlebar-bg: @header-bg-light;
@button-border-color: ~"#0000000f #0000000f #00000029";
@button-active-border-color: ~"#0000000f";
@button-color: ~"padding-box linear-gradient(#ffffffb3, #ffffffb3)";
@button-hover-color: ~"#f9f9f980";
@button-active-color: ~"#f9f9f94d";
@menu-item-hover: ~"#00000009";
@menu-item-active: ~"#00000006";
@ControlFillColorDefault: ~"#FFFFFFB3";
@ControlFillColorInputActive: white;
@low-elevation-ramp: ~"0px calc(0.5 * var(--elevation-height)) calc(1 * var(--elevation-height)) 0px" fade(#000, 14%), ~"0px calc(0.5 * var(--elevation-height)) calc(1 * var(--elevation-height)) 0" fade(#000, 14%);
@high-elevation-ramp: ~"0px calc(0.5 * var(--elevation-height)) calc(1 * var(--elevation-height)) 0px" fade(#000, 24%), ~"0px 0px 8px 0px" fade(#000, 20%);
@Acrylic-bg: rgba(255, 255, 255, 0.6);
@Text-Input: padding-box linear-gradient(@ControlFillColorDefault, @ControlFillColorDefault);
@Text-Input-focus: padding-box linear-gradient(@ControlFillColorDefault, @ControlFillColorDefault) !important;
}
.define-colors(true) {
@body-bg: lighten(average(average(fade(@config-primary-color, 30%), black), @layer-2-color), 2%);
@layer-1-color: #202020;
@layer-2-color: #272727;
@layer-3-color: #323232;
@obj-color: lighten(saturate(average(fade(@config-primary-color, 2%), #2b2b2b), 15%), 1%);
@LayerFillColorDefault: ~"#3a3a3a4c";
@CardBackgroundFillColorDefault: fade(white, 5%);
@ExpanderHeaderBackground: ~"#ffffff0f";
@obj-title-color: white;
@Fluent-border: fade(black, 9.8%);
@details-second-font-color: #cfcfcf;
@titlebar-bg: @header-bg-dark;
@button-border-color: ~"#ffffff18 #ffffff12 #ffffff12";
@button-active-border-color: ~"#ffffff12";
@button-color: ~"padding-box linear-gradient(#ffffff0f, #ffffff0f)";
@button-hover-color: ~"#ffffff15";
@button-active-color: ~"#ffffff08";
@menu-item-hover: ~"#ffffff0f";
@menu-item-active: ~"#ffffff0a";
@ControlFillColorDefault: ~"#FFFFFF0F";
@ControlFillColorInputActive: ~"#1E1E1EB3";
@low-elevation-ramp: ~"0px calc(0.5 * var(--elevation-height)) calc(1 * var(--elevation-height)) 0px" fade(#000, 28%), ~"0px calc(0.5 * var(--elevation-height)) calc(1 * var(--elevation-height)) 0px" fade(#000, 14%);
@high-elevation-ramp: ~"0px calc(0.5 * var(--elevation-height)) calc(1 * var(--elevation-height)) 0px" fade(#000, 28%), ~"0px 0px 2px 0px" fade(#000, 20%);
@Acrylic-bg: transparent;
@Text-Input: padding-box linear-gradient(@ControlFillColorDefault, @ControlFillColorDefault);
@Text-Input-focus: padding-box linear-gradient(@ControlFillColorInputActive, @ControlFillColorInputActive), border-box linear-gradient(~"#FFFFFF12" ~"calc(100% - 2px)", var(--primary-color) ~"calc(100% - 2px)", var(--primary-color)) !important;
}
.define-header(@config-colored-header);
.define-header(false) {
@header-bg: @titlebar-bg;
}
.shadow2() {
--elevation-height: 2px;
}
.shadow4() {
--elevation-height: 4px;
}
.shadow8() {
--elevation-height: 8px;
}
.shadow16() {
--elevation-height: 16px;
}
.shadow28() {
--elevation-height: 28px;
}
.shadow64() {
--elevation-height: 64px;
}
.WelcomeHero::after {
content: 'Theme by: 145Hub | Website: https://145hub.pages.dev';
display: block;
text-align: center;
margin-top: 10px;
font-size: 12px;
color: #6C8297;
}
:root {
accent-color: var(--primary-color);
--button-bg: @obj-color;
--button-bg-hover: fade(#999, 10%);
--fancybox-bg: @backdrop;
--fancybox-accent-color: var(--primary-color);
--noise-asset: url(data:image/png;base64,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);
& when (@config-dark-mode = false) {
--Acrylic-filter: contrast(45%) blur(30px) saturate(1.25) brightness(135%);
color-scheme: light;
}
& when (@config-dark-mode = true) {
--Acrylic-filter: saturate(125%) brightness(125%) blur(30px) contrast(75%) saturate(250%) brightness(60%) contrast(80%) brightness(60%);
color-scheme: dark;
}
& when (@config-colored-header = false) {
--colored-titlebar: false;
}
& when (@config-colored-header = true) {
--colored-titlebar: true;
}
}
body {
overflow-y: auto;
}
.App-content {
border-top: none;
}
div.PostUser-bar--empty {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 0.26458335 0.79375005' version='1.1' id='svg5' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs2'/%3E%3Cg id='layer1'%3E%3Crect style='fill:%238d8d8d;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:10' id='rect31' width='0.26458335' height='0.26458335' x='0' y='0.26458335'/%3E%3C/g%3E%3C/svg%3E");
}
.PostUser-bar {
height: 3px;
}
.PostUser .UserCard {
--border-radius: 10px;
}
.Dropdown-separator {
& when (@config-dark-mode = false) {
background-color: ~"#0000000f";
}
& when (@config-dark-mode = true) {
background-color: ~"#ffffff15";
}
}
.Dropdown-menu {
&:not(.sideNav .Dropdown--select .Dropdown-menu, .PostStreamScrubber .Dropdown-menu) {
border-radius: 10px;
background-image: var(--noise-asset);
background-attachment: fixed;
}
&:not(.sideNav .Dropdown--select .Dropdown-menu, .PostStreamScrubber .Dropdown-menu, .PostMeta .Dropdown-menu) {
padding: 0;
}
&>li {
margin: 4px;
&>a, &>button {
border-radius: 8px;
&:hover {
background: @menu-item-hover;
}
&:active {
background: @menu-item-active;
}
}
&.active>a, &.active>button {
background: @menu-item-active;
}
}
.PostMeta & {
padding: 8px;
}
}
fieldset>legend, .SettingsPage label {
& when (@config-dark-mode = false) {
color: black;
}
& when (@config-dark-mode = true) {
color: white;
}
font-size: 14px;
font-weight: normal;
}
p.description, p.Settings-theme--selection_description {
color: @details-second-font-color;
}
.SettingsPage>ul>li {
border-radius: 8px;
background-color: @LayerFillColorDefault;
margin-bottom: 12px;
padding: 16px;
}
.Hero {
margin: 12px;
border-radius: 10px;
}
.darkenBackground {
border-radius: 10px;
}
.Modal {
border-radius: 10px;
}
.Modal-header h3 {
font-weight: bold;
}
.Modal-body {
background-color: @LayerFillColorDefault;
}
.Modal-content {
border-radius: 10px;
& when (@config-colored-header = false) {
background-color: var(--header-bg);
}
}
.backdrop {
background-color: @backdrop;
}
.IndexPage>.container {
margin-top: 16px;
}
.LoadingIndicator-container--medium, .LoadingIndicator-container--large {
color: var(--primary-color);
}
.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);
}
#header {
& input[type=search] {
font-size: 14px;
background: @Text-Input;
&:focus {
background: @Text-Input-focus;
}
}
& .Search-input::before, .FormControl::-webkit-input-placeholder, .FormControl::placeholder, & .Search-input > .Search-clear, & .Search-input > .Search-clear:hover {
& when (@config-dark-mode = false) {
color: rgb(117, 117, 117) !important;
}
& when (@config-dark-mode = true) {
color: #cfd1d2 !important;
}
}
}
.FormControl[type=text],
.FormControl[type=email],
.FormControl[type=password],
textarea.FormControl,
.TagsInput {
border-radius: 4px;
background: @Text-Input;
}
.FormControl[type=text]:focus,
.FormControl[type=email]:focus,
.FormControl[type=password]:focus,
.Modal-body textarea.FormControl:focus,
.TagsInput:focus, .TagsInput:focus-within {
background: @Text-Input-focus;
}
.TagsInput:focus-within {
outline: none;
}
.SelectTagList {
& > li {
margin: 4px;
border-radius: 4px;
&.active {
background: @menu-item-active;
}
}
}
.Checkbox--switch .Checkbox-display {
width: 40px;
height: 20px;
border-radius: 20px;
margin-top: 0px;
&:before {
background: padding-box linear-gradient(white, white);
width: 20px;
height: 20px;
top: 0px;
left: 0px;
margin: -1px -0.5px;
}
}
.on.Checkbox--switch .Checkbox-display {
background: var(--primary-color);
transition-property: background-color, border;
&:before {
left: 20px;
}
}
.Alert {
font-size: 14px;
}
.Composer {
border-radius: 10px 10px 0 0;
}
.ComposerBody-loading {
border-radius: 10px;
}
.DiscussionListItem {
margin: 12px 8px;
border-radius: 2px;
background-color: @CardBackgroundFillColorDefault;
&:active {
background-color: @button-active-color;
}
.DiscussionList:not(.DiscussionList--searchResults) & .read .DiscussionListItem-title, .DiscussionList:not(.DiscussionList--searchResults) & .unread .DiscussionListItem-title {
color: @obj-title-color;
}
& .DiscussionListItem-info, & .DiscussionListItem-count, & .DiscussionListItem-info .item-excerpt {
color: @details-second-font-color;
}
}
.DiscussionListItem-content:active {
background: none !important;
}
.NotificationList {
--muted-color: var(--text-color);
--button-color: var(--text-color);
&-header {
border-bottom: 1px solid @Fluent-border;
& when (@config-dark-mode = false) {
background-color: ~"#00000005";
}
& when (@config-dark-mode = true) {
background-color: ~"#00000021";
}
border-radius: 10px 10px 0 0;
}
&-content {
padding-bottom: 12px;
}
}
ul.NotificationGroup-content {
display: flex;
flex-direction: column;
row-gap: 12px;
& > li {
margin: 0 8px;
--muted-color: @details-second-font-color;
& > a {
&.Notification {
background-color: @CardBackgroundFillColorDefault;
border-radius: 4px;
}
&.Notification:hover, &.unread {
background-color: @button-hover-color;
}
&.Notification:active, &.Notification:focus, &.Notification:focus-within {
background-color: @button-active-color;
}
&.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;
}
}
& .Notification-excerpt {
color: @details-second-font-color;
}
}
}
.Post-body blockquote {
--body-bg: @obj-color;
}
.ReplyPlaceholder {
border: none;
}
aside.DiscussionPage-list {
border-radius: 10px;
& .DiscussionListItem {
margin: 12px 8px;
border-radius: 4px;
}
}
.tooltip {
& .tooltip-arrow {
display: none;
& when (@config-dark-mode = false) {
color: black !important;
}
}
&>.tooltip-inner {
& when (@config-dark-mode = false) {
color: black !important;
}
background-color: @layer-2-color !important;
background-image: var(--noise-asset);
}
}
.fancybox__toolbar {
app-region: drag;
}
.fancybox__backdrop, .fancybox__image {
app-region: no-drag;
}
.fancybox__toolbar__items--left {
margin-left: ~"env(titlebar-area-x, 0)";
margin-right: -100px;
}
.fancybox__toolbar__items {
height: 48px;
}
.carousel__viewport, .fancybox__toolbar__items--right {
border-radius: 10px;
background-image: var(--noise-asset);
background-color: @layer-3-color;
}
.carousel__viewport {
margin-bottom: 4px;
}
.fancybox__thumbs .carousel__slide .fancybox__thumb::after {
border-width: 2.4px;
}
.fancybox__thumbs .carousel__slide.is-nav-selected .fancybox__thumb::after {
opacity: 1;
}
.fancybox__toolbar__items--right {
margin-left: -500px;
margin-right: ~"calc(100% - env(titlebar-area-width, 100%) - env(titlebar-area-x, 0px) + 16px)";
background-color: @layer-1-color;
padding: 8px 12px;
column-gap: 12px;
& > .carousel__button {
--carousel-button-width: 32px;
--carousel-button-height: 32px;
app-region: no-drag;
border-radius: 4px;
&:hover {
background-color: @menu-item-hover;
}
&:active {
background-color: @menu-item-active;
}
& > svg {
--carousel-button-svg-filter: none;
& when (@config-dark-mode = false) {
stroke: black;
}
& when (@config-dark-mode = true) {
stroke: white;
}
}
}
}
.FlarumBlogItem {
& .FlarumBlog-Article {
& .FlarumBlog-Article-Sidebar {
& .FlarumBlog-Article-Author {
.fluent-card();
}
}
& .FlarumBlog-Article-Container {
& .FlarumBlog-Article-Content, & .FlarumBlog-Article-Comments {
.fluent-card();
}
}
}
}
@media @phone {
#header {
box-shadow: none;
}
.IndexPage-toolbar {
margin-left: -6px;
margin-right: -6px;
}
.DiscussionListItem.Slidable .Slidable-underneath {
border-radius: 0 4px 4px 0;
background: @layer-2-color !important;
}
& when (@config-dark-mode = false) {
.Slidable .Slidable-underneath .fa-ellipsis-v {
color: black;
}
}
.UserPage > .container {
& .PostsUserPage .Placeholder {
margin: 40px 0;
}
& .DiscussionList {
margin: 0;
}
}
.DiscussionPage-discussion > .container {
padding: 0 16px 16px;
}
.UserPage .DiscussionsUserPage {
margin: 0 -15px;
}
.PostsUserPage {
margin: 0 -15px;
padding: 16px;
}
.DiscussionPage-discussion > .container, .PostsUserPage {
background-color: @obj-color;
}
.unread .DiscussionListItem-count {
color: white;
}
.dropdown-backdrop, .drawer-backdrop, .composer-backdrop {
background-color: @backdrop;
}
.Dropdown .Dropdown-menu {
.shadow28() !important;
border-radius: 0px !important;
box-shadow: @high-elevation-ramp, @shadow-outline-normal !important;
&>li>a, &>li>button {
background: transparent !important;
&:hover {
background: @menu-item-hover !important;
}
&:active {
background: @menu-item-active !important;
}
}
}
@media (display-mode: window-controls-overlay) {
#app-navigation, .Modal .App-titleControl, .Composer:not(.minimized):before, .ModalManager:before {
app-region: drag;
& button, & a {
app-region: no-drag;
}
}
.App-titleControl>.Button>*, .App-primaryControl>.Button, #home-link, .App-backControl>.Button, .normal .ComposerBody-header>li:first-child h3 {
app-region: no-drag;
}
.App, .Composer:not(.minimized) {
padding-top: ~"max(env(titlebar-area-height), var(--header-height-phone))";
}
.App-navigation, .App-primaryControl>.Button, .App-titleControl>.Button, .App-backControl>.Button, .Composer:not(.minimized):before, .ModalManager:before {
height: ~"max(env(titlebar-area-height), var(--header-height-phone))";
}
.App-titleControl {
left: 0;
}
.Composer:not(.minimized) .Composer-controls .item-minimize, .App.affix .App-backControl {
margin-left: ~"env(titlebar-area-x)";
}
.Modal .App-backControl {
margin-left: ~"env(titlebar-area-x)" !important;
}
.normal .ComposerBody-header>li:first-child, .App.affix .App-titleControl, .Modal .App-titleControl {
margin-left: ~"calc(46px + env(titlebar-area-x))";
width: ~"calc(env(titlebar-area-width) - (46px * 2))";
margin-right: ~"calc(100% - env(titlebar-area-x) - env(titlebar-area-width) + 46px)";
}
.ComposerBody-editor .TextEditor-controls .item-submit, .App.affix .App-primaryControl {
margin-right: ~"calc(100% - env(titlebar-area-x) - env(titlebar-area-width))" !important;
}
}
}
@media @tablet-up {
nav.IndexPage-nav.sideNav,
nav.UserPage-nav.sideNav {
margin-right: 16px;
}
.sideNav .Dropdown--select .Dropdown-menu>li>a {
color: var(--text-color);
}
.DiscussionListItem {
margin: 12px 0;
}
.DiscussionPage-stream, .PostsUserPage {
padding: 0 16px 16px;
background-color: @LayerFillColorDefault;
border-radius: 10px;
}
.PostsUserPage {
padding: 16px;
}
.Dropdown-menu span.Button-label {
font-size: 14px;
}
@media (max-width: (@screen-desktop - 0.02)) {
nav.IndexPage-nav.sideNav {
padding: 16px;
border-radius: 10px;
background-color: @LayerFillColorDefault;
margin-right: 0;
}
.sideNav:after {
display: none;
}
}
.item-nav>div>ul>li {
margin: 4px 0;
padding: 0 8px;
border-radius: 4px;
&:hover {
background-color: @menu-item-hover;
}
&:active, &.active {
background-color: @menu-item-active;
}
&.active::before {
content: '';
width: 4px;
height: 17px;
background: var(--primary-color);
border-radius: 2px;
float: left;
margin: 9px -28px 0 -8px;
}
&.active~li.active::before {
margin: 9px -28px 0 0;
}
&.active:has(~ li.active) {
background-color: transparent;
}
&.active:has(~ li.active)::before {
display: none;
}
}
@media (display-mode: window-controls-overlay) {
#header {
app-region: drag;
& a, & button, & input {
app-region: no-drag;
}
}
.App, .App-header {
--header-height: ~"calc(60px + env(titlebar-area-height))";
& .Header-title {
margin-bottom: 4px;
}
}
#header-primary {
clear: left;
}
#header-secondary .item-search {
position: fixed;
top: 8px;
left: 33.33%;
width: 33.33%;
z-index: 10;
& input.FormControl {
width: 100%;
}
&>.Search-results {
left: 0;
right: 0;
}
}
.Search.focused {
margin-left: 0;
}
.fullScreen .Composer-controls .Button {
margin-right: ~"calc(100vw - env(titlebar-area-x) - env(titlebar-area-width))" !important;
app-region: no-drag;
}
}
}
@media @desktop-up {
.IndexPage-results.sideNavOffset,
.UserPage-content.sideNavOffset {
padding-left: 16px;
border-left: 1px solid @Fluent-border;
}
}
.fluent-button(@accent) {
& when (@accent) {
& when (@config-dark-mode = false) {
background: ~"padding-box linear-gradient(var(--button-bg), var(--button-bg)), border-box linear-gradient(#ffffff14 90%, #00000066 100%), border-box var(--button-bg)";
}
& when (@config-dark-mode = true) {
background: ~"padding-box linear-gradient(var(--button-bg), var(--button-bg)), border-box linear-gradient(#ffffff14 90%, #00000023 100%), border-box var(--button-bg)";
}
border: 1px solid transparent;
&:hover {
& when (@config-dark-mode = false) {
background: ~"padding-box linear-gradient(var(--button-bg-hover), var(--button-bg-hover)), border-box linear-gradient(#ffffff14 90%, #00000066 100%), border-box var(--button-bg-hover)";
}
& when (@config-dark-mode = true) {
background: ~"padding-box linear-gradient(var(--button-bg-hover), var(--button-bg-hover)), border-box linear-gradient(#ffffff14 90%, #00000023 100%), border-box var(--button-bg-hover)";
}
}
&:active {
background: var(--button-bg-active);
}
&.disabled, &:disabled {
& when (@config-dark-mode = false) {
background: ~"#00000037";
color: white;
}
& when (@config-dark-mode = true) {
background: ~"#ffffff28";
color: ~"#ffffff87";
}
}
}
& when not (@accent) {
border: 1px solid transparent;
background: @button-color;
border-color: @button-border-color;
color: var(--text-color);
&:hover {
background: @button-hover-color;
}
&:active {
background: @button-active-color;
border-color: @button-active-border-color;
}
&.disabled, &:disabled {
background: @button-active-color;
color: var(--text-color);
opacity: 1;
}
}
}
.fluent-layer() {
background-color: @LayerFillColorDefault;
border-radius: 10px;
}
.fluent-menu() {
border-radius: 10px;
}
.fluent-menu-item() {
margin: 4px;
border-radius: 4px;
&:hover {
background: @menu-item-hover;
}
&:active, &.active {
background: @menu-item-active;
}
}
.fluent-acrylic() {
background-color: @layer-2-color;
background-image: var(--noise-asset);
background-attachment: fixed;
}
.fluent-card() {
border-radius: 10px;
}
/* Theme by: 145Hub */
使用条款：
- 未经作者（14569）授权，禁止魔改代码并将魔改后的代码发布至其他网站；
- 禁止售卖免费版代码获利；
- 禁止用于包含违反国家法律内容的论坛；
- 代码内包含版权信息，未经作者（14569）授权，禁止修改或删除版权信息。