论坛可以考虑再度 PWA 化

Famous · 2023年8月14日

论坛似乎变宽了coolapk-105

还有这个……另外就是加载速度似乎确实有提升？我这边移动墙中墙基本都能1-2秒开了。

DaleZ · 2023年8月14日

Famous 很显然布局发生了更新。
所以……习惯就好（

DaleZ · 2023年8月14日

目前认为差不多了。

:root {
	accent-color: var(--primary-color);
}

.Button:not(.Button--flat, .App-header .Button, .App-header .Button:hover, .UserCard .Button, .UserCard .Button:hover) {
	background: padding-box linear-gradient(var(--button-bg), var(--button-bg)), border-box linear-gradient(#ffffff40 90%, #00000040 100%), border-box var(--button-bg);
	border: 1px solid transparent;
}

.Button:not(.Button--flat, .App-header .Button, .App-header .Button:hover, .UserCard .Button, .UserCard .Button:hover):active {
		background: var(--button-bg);
	border: 1px solid #ffffff20
}

.Select>.Select-input {
	background: padding-box linear-gradient(var(--control-bg), var(--control-bg)), border-box linear-gradient(#ffffff40 90%, #00000040 100%), border-box var(--control-bg);
	border: 1px solid transparent;
}

.Select>.Select-input:focus {
	background: padding-box linear-gradient(var(--primary-color), var(--primary-color)), border-box linear-gradient(#ffffff40 90%, #00000040 100%), border-box var(--primary-color);
}

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;
}

.Dropdown-menu {
	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 16px 32px rgba(0, 0, 0, 0.24);
	padding: 0;
}

.Dropdown-menu>li {
	margin: 8px;
}

.Dropdown-menu>li>a,
.Dropdown-menu>li>button {
	border-radius: 4px;
}

.Dropdown-menu:not(.sideNav .Dropdown-menu, .item-scrubber .Dropdown-menu) {
	background-color: var(--body-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256' style='background:transparent;filter:grayscale(1) contrast(2.5);opacity:5%25'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='100' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' /%3E%3C/svg%3E");
}

.Button:active,
.Button.active,
.open>.Button.Dropdown-toggle {
	box-shadow: unset;
}

.item-nav>div>ul>li {
	margin: 8px 0;
	padding: 0 8px;
	border-radius: 4px;
}

.item-nav>div>ul>li:hover,
.item-nav>div>ul>li.active {
	background-color: #99999922;
}

.item-nav>div>ul>li:active {
	background-color: #99999933;
}

.item-nav>div>ul>li.active::before {
	content: '';
	width: 4px;
	height: 17px;
	background: var(--primary-color);
	border-radius: 2px;
	float: left;
	margin: 9px -28px 0 -8px;
}

.item-nav>div>ul>li.active::before {
	content: '';
	width: 4px;
	height: 17px;
	background: var(--primary-color);
	border-radius: 2px;
	float: left;
	margin: 9px -28px 0 -8px;
}

.Hero {
	margin: 12px;
	border-radius: 8px;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14);
}

.darkenBackground {
	border-radius: 8px;
}

.Modal {
	border-radius: 8px;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 64px 128px rgba(0, 0, 0, 0.24);
}

.Modal-content {
	border-radius: 8px;
}

.IndexPage>.container {
	margin-top: 16px;
}

.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='0 16.933332 16.933332;450 16.933332 16.933332;1080 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);
	transform: rotate(-95deg);
}

.Form--centered .FormControl[type=text],
.Form--centered .FormControl[type=email],
.Form--centered .FormControl[type=password] {
	border-radius: 4px;
	border: 2px solid transparent;
	background: padding-box linear-gradient(var(--body-bg), var(--body-bg)), border-box linear-gradient(#99999933 calc(100% - 2px), #999 calc(100% - 1px), #999);
}

.FormControl:not(input[type~=search]):focus {
	background: padding-box linear-gradient(var(--body-bg), var(--body-bg)), border-box linear-gradient(#99999933 calc(100% - 2px), var(--primary-color) calc(100% - 1px), var(--primary-color)) !important;
}

.Checkbox--switch .Checkbox-display {
	width: 40px;
	height: 20px;
	border-radius: 20px;
	margin-top: 0px;
}

.Checkbox--switch .Checkbox-display:before {
	background: white;
	width: 20px;
	height: 20px;
	border: 5px solid var(--control-bg);
	box-shadow: none;
	transition: border .2s;
	top: 0px;
	left: 0px;
}

.on.Checkbox--switch .Checkbox-display {
	background: var(--primary-color);
}

.on.Checkbox--switch .Checkbox-display:before {
	left: 20px;
	border: 5px solid var(--primary-color);
}

.AfruxWidgets-Widget-content {
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14);
}

.AlertManager .Alert {
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 16px 32px rgba(0, 0, 0, 0.24);
}

.Composer {
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 64px 128px rgba(0, 0, 0, 0.24);
	border-radius: 8px 8px 0 0;
}

.ComposerBody-loading {
	border-radius: 8px;
}

@media (min-width:768px) {
	.Composer.active:not(.fullScreen) {
		box-shadow: 0 0 0 2px var(--primary-color), 0 64px 128px rgba(0, 0, 0, 0.24);
	}

	li.TagTile {
		margin: 6px;
		border-radius: 8px !important;
		width: calc(33.333% - 12px);
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14);
	}
	
	nav.IndexPage-nav.sideNav {
		margin-right: 16px;
	}
	
	.IndexPage-results.sideNavOffset {
		padding-left: 16px;
		border-left: 1px solid #9999;
	}
	
	.DiscussionListItem {
		margin: 12px 0;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.04);
	}	
}

诚挚邀请各位再次测试。欢迎提出宝贵意见。
~~不过有没有人可以告诉我 Less 预处理器的智能问题是为什么啊~~

焊锡锡 · 2023年8月15日

感觉并没有什么用，大多数用户的习惯仍然是先打开浏览器，然后再去打开论坛网站[tieba=yinxian]
不开PWA，论坛主js文件应该还能小一点，当时关掉PWA的原因就是精简不必要的功能提升打开速度[tieba=yinxian]

DaleZ · 2023年8月15日

焊锡锡别这样嘛~PWA 多好看呐~
如果考虑到加载速度的话，留下 manifest 和图标，把插件扔掉应该可以二者兼顾

綾瀬桃桃 · 2023年8月15日

DaleZ 你还可以考虑缩小一下你的插件的js大小（

DaleZ · 2023年8月15日

綾瀬桃桃不知道怎么缩小……首次编译后就比官方原版的大了不少。紧急救援！

DaleZ · 2023年8月19日

来了。

Fluent-Flarum

使用这款主题为你的 Flarum 换新颜。
本主题参考了 Microsoft Fluent Design System 进行设计，为您带来熟悉、柔和、亲切和流畅的感觉。

覆盖的内容

按钮、切换开关、选项菜单、标签、边栏、模态窗口、信息栏、加载动画、输入控件和复选框。
不确定是否与 Flarum Categories 兼容。

展示

DaleZ · 2023年8月19日

@綾瀬桃桃显示用户经验值的那个插件叫什么名字来着？我改了那个 UI，但不知道叫啥写不了日志

[VTpwj][€ИЁĎĢШ !] · 2023年8月19日

DaleZ Level Ranks

綾瀬桃桃 · 2023年8月19日

DaleZ 不确定是否与 Flarum Categories 兼容。

n

焊锡锡 · 2023年8月19日

DaleZ 感觉没有flarum原版好看（
并且好多地方都没适配，挺割裂的

来力（悲）

DaleZ · 2023年8月19日

焊锡锡感觉没有flarum原版好看（

估计是偏好简洁风吧……我也不知道为什么完全按微软的模仿就是造不出原版的简洁与精致相结合……

焊锡锡并且好多地方都没适配，挺割裂的

看哪里不顺眼改哪里
个人偏好，如果觉得哪里可以 Fluent 化的尽管说，趁暑假还没结束（

Safari 把噪点给我显示成这个鬼样子[tieba=pen]
看来还是不能用 SVG 模拟噪点
那么各位愿意用微软原版图像替代回来吗？70多KB[tieba=huaji]

綾瀬桃桃 · 2023年8月19日

DaleZ 那么各位愿意用微软原版图像替代回来吗？70多KB

上个效果看看

DaleZ 看哪里不顺眼改哪里

之前是测的PC端还好现在应用插件后在移动端有许多地方观感就不太好了

DaleZ · 2023年8月20日

綾瀬桃桃上个效果看看

不上了，太大，直接否决，不搞噪点了

Betta_Fish · 2023年8月20日

浅色模式下表现不错，深色有待改进。
还有一些细节...

另外ProgressRing能不能调大点（？）

感觉这条分割线没有必要，适度留白也可以

焊锡锡 · 2023年8月20日

DaleZ 如果是论坛管理，则帖子审核这三个Button颜色异常（

DaleZ · 2023年8月20日

焊锡锡这我怎么看（（（

Betta_Fish 细节一将修复，细节二原始版本就是这样，细节三（我是说 ProgressRing）一调大就要居中才顺眼，一要居中就要一大堆的 Fix up，一加上一大堆的 Fix up 就容易出问题

ha1 · 2023年8月20日

PWA+push插件主打的就是一个沉浸式

ha1 · 2023年8月20日

DaleZ 焊锡锡这我怎么看（（（

拿个自建站试试（）

检测到论坛CSS可能没有正确加载，如出现排版混乱请刷新重试。

We detected that the CSS might not be loaded correctly. If the website displays abnormally, Please refresh and try again.

论坛可以考虑再度 PWA 化

Famous

DaleZ

DaleZ

焊锡锡

DaleZ

綾瀬桃桃

DaleZ

DaleZ

Fluent-Flarum

覆盖的内容

展示

DaleZ

[VTpwj][€ИЁĎĢШ !]

綾瀬桃桃

焊锡锡

DaleZ

綾瀬桃桃

DaleZ

Betta_Fish

焊锡锡

DaleZ

ha1

ha1

© 2025 wvbCommunity 管理团队