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

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

论坛可以考虑再度 PWA 化

DaleZ · 2023-08-09T07:36:02+00:00

尤其是加上Window Overlays Control（如上图），那感觉一个沉浸啊

DaleZ

Betta_Fish 具体是哪里呢？按钮的话就长这样的

Betta_Fish

DaleZ 按钮的话就长这样的

切换到浅色主题就正常了...深色模式下按钮的边框明显不对劲

Famous

论坛似乎变宽了 coolapk-105

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

DaleZ

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

DaleZ

目前认为差不多了。

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