File Browser界面美化css，努力升级

福利羊毛
1

image
image1770×811 4.23 KB


image
image1895×866 152 KB

image
image1898×854 101 KB

image
image1902×796 69.2 KB

  nav {
    display: flex;
    flex-direction: column;
    background: var(--background);
    border-radius: 15px;
    box-shadow: 0 0px 8px rgb(0 0 0 / 20%);
    padding: 1em;
    backdrop-filter: blur(10px);
  }

#listing.list .item p.name:not(#listing.list .item.header .name) {
    margin-right: -3em;
    font-size: 0.9em;
}

body:has([aria-label="登录"]) nav {
    display: none;
}

body:has([aria-label="登录"]) main header {
    display: none;
}

body:has([class="share__box__header"]) .button {
    border-radius: 0.3em;
    box-sizing: border-box;
    width: 150px;
}

body:has([aria-label="登录"]) main {
    padding: 1.2em; /* 增加内边距以提升视觉效果 */
    width: 90%; /* 使用更小的百分比，适应不同屏幕 */
    max-width: 940px; /* 最大宽度设置，保持一致性 */
    font-family: "San Francisco", sans-serif; /* 使用你定义的字体 */
    margin: 11px auto 10px auto;
    background: var(--background);
    border-radius: 8px;
    box-shadow: 0 0px 27px rgb(0 0 0 / 50%);
    padding: 0.8em;
    /* font-family: Arial, sans-serif; */
    /* font-size: 0.9em; */
    width: 100%;
}

.card>.card-content> button {margin-left: 2px;width: 200px;}

.button {
    border-radius: 0.3em; /* 增加圆角 */
    box-sizing: border-box; /* 包含内边距和边框在内 */
    width: 65px; /* 固定宽度 */
}

.button:hover {
    background-color: rgb(0 0 0 / 10%); /* 悬停时改变背景颜色 */
}



body:has([aria-label="登录"]) main .breadcrumbs {
    display: none; /* 隐藏面包屑 */
}

@font-face {
    font-family: "San Francisco";
    font-weight: 100;
    src: url(https://registry.npmmirror.com/kwxoswoff20jscss/1.0.1/files/fonts/HarmonyOSHans-Medium.woff2) format('woff2');
}

#login form {
    max-width: 16em;
    width: 90%;
    position: relative; /* 确保 margin 在正常流中 */
    top: 50%; /* 控制垂直位置 */
}

html, body {
	background-color: var(--background);
	color: rgba(11, 11, 11, 0.9);
	font: normal normal 100 16px/1.168em "San Francisco", -apple-system, -system-ui, BlinkMacSystemFont;
	font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-moz-text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0004);
	-ms-text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0004);
	-o-text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0004);
	-webkit-text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0004);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.0004);
	-ms-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.input {
    background: var(--surfacePrimary);
    color: var(--textSecondary);
    border: 1px solid var(--borderPrimary);
    border-radius: 0.4em;
    padding: 0.5em 1em;
    transition: 0.2s;
    margin: 0px;
}

main {
	/* top: 4.5em; */
	margin: 11px 38px 5px auto;
	background: var(--background);
	border-radius: 8px;
	box-shadow: 0 0px 8px rgb(0 0 0 / 20%);
	padding: 0.8em;
	font-family: "San Francisco", sans-serif; /* 使用你定义的字体 */
	/* font-size: 0.9em; */
}

::placeholder {
	color: rgba(11, 11, 11, 0.6);
}

::-moz-selection,
::-webkit-selection,
::selection {
	background-color: rgba(29, 135, 241, 0.9);
	color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 736px) {
	body {
		padding-bottom: 0;
	}
	main {
		width: 100%;
	}
}

@media (prefers-color-scheme: dark) {
	html, body {
		background-color: #1D1E1F;
		color: rgba(255, 255, 255, 0.9);
	}
	::placeholder {
		color: rgba(255, 255, 255, 0.6);
	}
	::-moz-selection,
	::-webkit-selection,
	::selection {
		background-color: rgba(255, 255, 255, 0.9);
		color: rgba(11, 11, 11, 0.9);
	}
}

#login {
	background: whitesmoke;
}

#login h1 {
	font-weight: 100;
}

#login .input {
	border-radius: 0.6em;
	border: 1px solid var(--textSecondary);
	margin-bottom: 0.8em;
}

#login .wrong {
	border-radius: 0.6em;
	background: #ff2736;
	margin-bottom: 0.5em;
	text-transform: capitalize;
}

#login .button {
	border-radius: 0.6em;
	background: #1D87F1;
	width: 100%;
}

@media (prefers-color-scheme: dark) {
	#login {
		background-color: #1d1e1f;
	}
	#login h1 {
		color: rgba(255, 255, 255, 0.8);
	}
	#login .input {
		background-color: #1d1e1f;
		color: rgba(255, 255, 255, 0.8);
		-moz-box-shadow: 5px 5px 10px #0c0d0e, -5px -5px 10px #30333a, inset 2px 2px 2px #0c0d0e, inset -2px -2px 2px #30333a;
		-ms-box-shadow: 5px 5px 10px #0c0d0e, -5px -5px 10px #30333a, inset 2px 2px 2px #0c0d0e, inset -2px -2px 2px #30333a;
		-o-box-shadow: 5px 5px 10px #0c0d0e, -5px -5px 10px #30333a, inset 2px 2px 2px #0c0d0e, inset -2px -2px 2px #30333a;
		-webkit-box-shadow: 5px 5px 10px #0c0d0e, -5px -5px 10px #30333a, inset 2px 2px 2px #0c0d0e, inset -2px -2px 2px #30333a;
		box-shadow: 5px 5px 10px #0c0d0e, -5px -5px 10px #30333a, inset 2px 2px 2px #0c0d0e, inset -2px -2px 2px #30333a;
	}
	#login .input::placeholder {
		text-shadow: 1px 1px 1px #30333a, -1px -1px 1px #0c0d0e;
	}
	#login .input::-moz-placeholder {
		text-shadow: 1px 1px 1px #30333a, -1px -1px 1px #0c0d0e;
	}
	#login .input:-ms-input-placeholder {
		text-shadow: 1px 1px 1px #30333a, -1px -1px 1px #0c0d0e;
	}
	#login .input::-ms-input-placeholder {
		text-shadow: 1px 1px 1px #30333a, -1px -1px 1px #0c0d0e;
	}
	#login .input::-o-placeholder {
		text-shadow: 1px 1px 1px #30333a, -1px -1px 1px #0c0d0e;
	}
	#login .input::-webkit-input-placeholder {
		text-shadow: 1px 1px 1px #30333a, -1px -1px 1px #0c0d0e;
	}
}

@media (max-width: 736px) {
	#login .input:focus ~ .button {
		margin-bottom: 100%;
	}
}

header {
	background-color: rgba(255, 255, 255, 0.8);
	-moz-box-shadow: 0 0.5px 0.5px -6px rgba(0, 0, 0, 0.035), 0 1.3px 1.3px -6px rgba(0, 0, 0, 0.05), 0 3px 3px -6px rgba(0, 0, 0, 0.065), 0 10px 10px -6px rgba(0, 0, 0, 0.1);
	-ms-box-shadow: 0 0.5px 0.5px -6px rgba(0, 0, 0, 0.035), 0 1.3px 1.3px -6px rgba(0, 0, 0, 0.05), 0 3px 3px -6px rgba(0, 0, 0, 0.065), 0 10px 10px -6px rgba(0, 0, 0, 0.1);
	-o-box-shadow: 0 0.5px 0.5px -6px rgba(0, 0, 0, 0.035), 0 1.3px 1.3px -6px rgba(0, 0, 0, 0.05), 0 3px 3px -6px rgba(0, 0, 0, 0.065), 0 10px 10px -6px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 0.5px 0.5px -6px rgba(0, 0, 0, 0.035), 0 1.3px 1.3px -6px rgba(0, 0, 0, 0.05), 0 3px 3px -6px rgba(0, 0, 0, 0.065), 0 10px 10px -6px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0.5px 0.5px -6px rgba(0, 0, 0, 0.035), 0 1.3px 1.3px -6px rgba(0, 0, 0, 0.05), 0 3px 3px -6px rgba(0, 0, 0, 0.065), 0 10px 10px -6px rgba(0, 0, 0, 0.1);
}

header .material-icons {
	color: #BABABA;
}

header #search #input {
	background-color: var(--surfacePrimary);
	border: 1px solid var(--surfaceSecondary);
	border-radius: 0.8em;
}

header #search.active #input {
	border-bottom: none;
}

header #search.active #result {
	min-height: 60vh;
	background-color: var(--background);
}

header #search.active #result > div > :first-child {
	display: none;
}

header #search.active .boxes {
	background: transparent;
	border: none;
	box-shadow: none;
}

header #search.active .boxes h3 {
	display: none;
}

header #search.active .boxes > div > div {
	border-radius: 1em;
}

@media (max-width: 736px) {
	header #file-selection {
		border-radius: 1em;
	}
	header #file-selection .action {
		border-radius: 0.7em;
	}
	header #dropdown {
		top: 4em;
		border-radius: 1em;
		background-color: rgba(255, 255, 255, 0.6);
	}
	header #dropdown .action {
		text-transform: capitalize;
		padding: 0 1em 0 1em;
	}
	header #dropdown .action:first-child {
		border-top-left-radius: 1em;
		border-top-right-radius: 1em;
	}
	header #dropdown .action:last-child {
		border-bottom-left-radius: 1em;
		border-bottom-right-radius: 1em;
	}
}

@media (prefers-color-scheme: dark) {
	header {
		background-color: rgba(29, 30, 31, 0.8);
		-moz-box-shadow: 0 0.5px 0.5px -6px rgba(0, 0, 0, 0.035), 0 1.3px 1.3px -6px rgba(0, 0, 0, 0.05), 0 3px 3px -6px rgba(0, 0, 0, 0.065), 0 10px 10px -6px rgba(0, 0, 0, 0.1);
		-ms-box-shadow: 0 0.5px 0.5px -6px rgba(0, 0, 0, 0.035), 0 1.3px 1.3px -6px rgba(0, 0, 0, 0.05), 0 3px 3px -6px rgba(0, 0, 0, 0.065), 0 10px 10px -6px rgba(0, 0, 0, 0.1);
		-o-box-shadow: 0 0.5px 0.5px -6px rgba(0, 0, 0, 0.035), 0 1.3px 1.3px -6px rgba(0, 0, 0, 0.05), 0 3px 3px -6px rgba(0, 0, 0, 0.065), 0 10px 10px -6px rgba(0, 0, 0, 0.1);
		-webkit-box-shadow: 0 0.5px 0.5px -6px rgba(0, 0, 0, 0.035), 0 1.3px 1.3px -6px rgba(0, 0, 0, 0.05), 0 3px 3px -6px rgba(0, 0, 0, 0.065), 0 10px 10px -6px rgba(0, 0, 0, 0.1);
		box-shadow: 0 0.5px 0.5px -6px rgba(0, 0, 0, 0.035), 0 1.3px 1.3px -6px rgba(0, 0, 0, 0.05), 0 3px 3px -6px rgba(0, 0, 0, 0.065), 0 10px 10px -6px rgba(0, 0, 0, 0.1);
	}
	header #search #input {
		background-color: rgba(29, 30, 31, 0.6);
		color: rgba(255, 255, 255, 0.9);
		border: 1px solid rgba(255, 255, 255, 0.1);
	}
	header #search #input input::placeholder {
		color: rgba(255, 255, 255, 0.6);
	}
	header #search.active #input {
		background-color: #1D1E1F;
		color: rgba(255, 255, 255, 0.9);
	}
	header #search.active input {
		color: rgba(255, 255, 255, 0.9);
	}
	header #search.active i {
		color: rgba(255, 255, 255, 0.9);
	}
	header #search.active #result {
		background-color: #1D1E1F;
		color: rgba(255, 255, 255, 0.9);
	}
	header #search.active .boxes h3 {
		color: rgba(255, 255, 255, 0.9);
	}
	header #search.active .boxes > div > div {
		background-color: rgba(255, 255, 255, 0.2);
		color: rgba(11, 11, 11, 0.9);
	}
	header #search.active .boxes i {
		color: rgba(11, 11, 11, 0.6) !important;
	}
	#result {
		background-color: rgba(29, 30, 31, 0.9);
		color: rgba(255, 255, 255, 0.9);
	}
}

@media (prefers-color-scheme: dark) and (max-width: 736px) {
	header #file-selection {
		background: #1D1E1F;
		box-shadow: 0 0.5px 0.5px -6px rgba(48, 51, 58, 0.035), 0 1.3px 1.3px -6px rgba(48, 51, 58, 0.05), 0 3px 3px -6px rgba(48, 51, 58, 0.065), 0 10px 10px -6px rgba(48, 51, 58, 0.1);
	}
	header #file-selection > span {
		color: rgba(255, 255, 255, 0.9);
	}
	header #dropdown {
		background-color: #1d1e1f;
		border: 1px solid rgba(255, 255, 255, 0.1);
		box-shadow: 0 0.5px 0.5px -6px rgba(48, 51, 58, 0.035), 0 1.3px 1.3px -6px rgba(48, 51, 58, 0.05), 0 3px 3px -6px rgba(48, 51, 58, 0.065), 0 10px 10px -6px rgba(48, 51, 58, 0.1);
	}
	header #dropdown .action span:not(.counter) {
		color: rgba(255, 255, 255, 0.9);
	}
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) or (-moz-backdrop-filter: blur(10px)) or (-ms-backdrop-filter: blur(10px)) or (-o-backdrop-filter: blur(10px)) {
	header {
		background-color: var(--background);
		-moz-backdrop-filter: blur(10px);
		-ms-backdrop-filter: blur(10px);
		-o-backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
}

main .breadcrumbs {
    height: 2em;
    background: #ffffff00;
    border-bottom: 0px solid #fff;
}

nav {
	text-transform: capitalize;
	top: 4.5em;
}

nav > {
	border-top: none;
}

nav > div {
	border-top: none;
}

nav .action {
	text-transform: capitalize;
	border-radius: .4em;
}

nav .credits>span {
	display: none;
}

nav .credits > div {
	width: 90%;
	text-align: center; /* 使文本居中 */
    color: #555;
    font-size: 1em;
    margin-top: 1em; /* 为文本添加上边距 */
}

nav > p {
      display: none;

}

nav .credits {
    background: #ffffff1c;
    margin: 1em 0.5em 1em !important;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
    padding: 0.8em;
    font-family: "San Francisco", sans-serif; /* 使用你定义的字体 */
    font-size: 0.9em;
}

nav .vue-simple-progress {
    background: rgb(238, 238, 238);
    border-radius: 4px;
    overflow: hidden;
}

nav .vue-simple-progress-bar {
    background: rgb(33, 150, 243);
    border-radius: 4px;
    transition: width 0.5s;
}


nav .material-icons {
	color: #5B5858;
}

@media (max-width: 736px) {
	nav {
		padding-top: 8em;
		background: rgba(245, 245, 245, 0.8);
		-moz-box-shadow: 0.5px 0 0.5px -6px rgba(0, 0, 0, 0.035), 1.3px 0 1.3px -6px rgba(0, 0, 0, 0.05), 3px 0 3px -6px rgba(0, 0, 0, 0.065), 10px 0 10px -6px rgba(0, 0, 0, 0.1);
		-ms-box-shadow: 0.5px 0 0.5px -6px rgba(0, 0, 0, 0.035), 1.3px 0 1.3px -6px rgba(0, 0, 0, 0.05), 3px 0 3px -6px rgba(0, 0, 0, 0.065), 10px 0 10px -6px rgba(0, 0, 0, 0.1);
		-o-box-shadow: 0.5px 0 0.5px -6px rgba(0, 0, 0, 0.035), 1.3px 0 1.3px -6px rgba(0, 0, 0, 0.05), 3px 0 3px -6px rgba(0, 0, 0, 0.065), 10px 0 10px -6px rgba(0, 0, 0, 0.1);
		-webkit-box-shadow: 0.5px 0 0.5px -6px rgba(0, 0, 0, 0.035), 1.3px 0 1.3px -6px rgba(0, 0, 0, 0.05), 3px 0 3px -6px rgba(0, 0, 0, 0.065), 10px 0 10px -6px rgba(0, 0, 0, 0.1);
		box-shadow: 0.5px 0 0.5px -6px rgba(0, 0, 0, 0.035), 1.3px 0 1.3px -6px rgba(0, 0, 0, 0.05), 3px 0 3px -6px rgba(0, 0, 0, 0.065), 10px 0 10px -6px rgba(0, 0, 0, 0.1);
	}
	nav .action {
		padding: 0;
		padding-left: 0.5em;
	}
}

@media (prefers-color-scheme: dark) and (max-width: 736px) {
	nav {
		background: rgba(30, 32, 36, 0.9);
		-moz-box-shadow: 0.5px 0 0.5px -6px rgba(48, 51, 58, 0.035), 1.3px 0 1.3px -6px rgba(48, 51, 58, 0.05), 3px 0 3px -6px rgba(48, 51, 58, 0.065), 10px 0 10px -6px rgba(48, 51, 58, 0.1);
		-ms-box-shadow: 0.5px 0 0.5px -6px rgba(48, 51, 58, 0.035), 1.3px 0 1.3px -6px rgba(48, 51, 58, 0.05), 3px 0 3px -6px rgba(48, 51, 58, 0.065), 10px 0 10px -6px rgba(48, 51, 58, 0.1);
		-o-box-shadow: 0.5px 0 0.5px -6px rgba(48, 51, 58, 0.035), 1.3px 0 1.3px -6px rgba(48, 51, 58, 0.05), 3px 0 3px -6px rgba(48, 51, 58, 0.065), 10px 0 10px -6px rgba(48, 51, 58, 0.1);
		-webkit-box-shadow: 0.5px 0 0.5px -6px rgba(48, 51, 58, 0.035), 1.3px 0 1.3px -6px rgba(48, 51, 58, 0.05), 3px 0 3px -6px rgba(48, 51, 58, 0.065), 10px 0 10px -6px rgba(48, 51, 58, 0.1);
		box-shadow: 0.5px 0 0.5px -6px rgba(48, 51, 58, 0.035), 1.3px 0 1.3px -6px rgba(48, 51, 58, 0.05), 3px 0 3px -6px rgba(48, 51, 58, 0.065), 10px 0 10px -6px rgba(48, 51, 58, 0.1);
	}
}

@media (prefers-color-scheme: dark) {
	nav .action {
		color: rgba(255, 255, 255, 0.6);
	}
}

#breadcrumbs {
	color: #BABABA;
	border-bottom: none;
}

#breadcrumbs span {
	color: #BABABA;
}

#breadcrumbs .material-icons {
	color: #BABABA;
}

main #listing .material-icons {
	color: #79D3FB;
}

main #listing.mosaic {
	box-sizing: border-box;
	background-color: #ffffff00;
	/* padding-top: 2em; */
	/* padding-left: 2em; */
	padding: 0px 0px 68px 24px;
	border-top-left-radius: 2em;
	margin: 0;
}

main #listing.mosaic h2 {
	margin: 9px 0px 0.5em -1em;
	font-size: 21px;
}

main #listing.mosaic .item {
	width: 14em;
	text-align: center;
	padding-bottom: 3em;
	color: --textSecondary;
	border-radius: 0.8em;
	-moz-box-shadow: none;
	-ms-box-shadow: none;
	-o-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	cursor: default;
	/* transform: scale(1.5); */
	transform-origin: top;
	top: 8px;
	font-size: 17px;
	padding: 2px 2px 2px 2px;
	box-shadow: rgb(0 0 0 / 69%) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px !important;
}

#listing.mosaic .item:hover {
 	   box-shadow: rgb(0 0 0) 0px 1px 5px, rgba(0, 0, 0, 0.24) 0px 1px 2px !important;
}

main #listing.mosaic .item:active {
	-moz-box-shadow: none !important;
	-ms-box-shadow: none !important;
	-o-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

#listing.mosaic.gallery .item i {
    width: 100%;
    margin-right: 0;
    font-size: 12em;
    text-align: center;
}

main #listing.mosaic .item i {
	margin-right: 0;
	font-size: 6em;
}

main #listing.mosaic .item img {
	border-radius: 8px;
	\: 4em;
	width: 90% !important;
	margin-top: 4px;
	height: 90% !important;
	margin-right: 1px;
}

main #listing.mosaic .item div:first-of-type {
	width: 100% !important;
	height: 100% !important;
	padding: 0px 0px 0px 0px;
}

main #listing.mosaic .item div:last-of-type {
	width: 100% !important;
	font-size: 17px;
	margin-top: 10px;
}

#listing.mosaic.gallery .item[data-type=image] div:last-of-type {
    color: var(--textPrimary);
    background: linear-gradient(rgb(0 0 0 / 0%), rgb(0 0 0 / 0%));
    font-size: 17px;
    border-radius: 8px;
}

#listing.mosaic.gallery .item div:last-of-type {
    position: absolute;
    bottom: 0em;
    width: calc(100% - 1em);
    text-align: center;
    padding: 0px 0px 0px 0px;
    left: 0px;
}

main #listing.mosaic .item .name {
	font-size: 0.8em;
	margin: 0px 0px 1px 0px;
}

main #listing.mosaic .item .modified {
	font-size: 0.6em;
	color: #BABABA;
}

main #listing.mosaic .item .size {
	font-size: 0.6em;
	color: #BABABA;
	margin: 10px 0px 10px 0px;
}

main #listing.list .item {
	/* border: none; */
	background-color: rgb(255 255 255 / 8%);
	padding: 0.5em;
	padding-left: 1em;
}

main #listing.list .item:nth-child(even) {
	background-color: rgb(255 255 255 / 8%);
}

main #listing.list .item.header {
	background: var(--background);
}

@media (max-width: 270px) {
	main #listing.mosaic {
		border-radius: 0;
		padding: 0px 0 4em 22px;
	}
	main #listing.mosaic .item {
		width: calc( 54% - 1em);
	}
	main #listing.mosaic .item i {
		font-size: 4em !important;
	}
	#breadcrumbs {
		padding-left: 2em;
	}
	h2 {
		margin-left: 2em;
	}
}

@media (max-width: 254px) {
	main #listing.mosaic .item i {
		font-size: 2em !important;
	}
}

@media (min-width: 736px) {
	main #listing.list .item {
		padding: 10px;
		padding-left: 0.9em;
		border-radius: 8px;
	}
}

@media (min-width: 1024px) {
	main #listing.mosaic {
		padding-right: 20%;
		background: #ffffff1c;
		margin: 1em -0.5em 0em !important;
		border-radius: 5px;
		box-shadow: 0 0px 0px rgb(0 0 0 / 10%);
		font-family: "San Francisco", sans-serif; /* 使用你定义的字体 */
		font-size: 0.9em;
		padding: 4px 0px 76px 34px;
		border: 1px solid var(--divider);
	}
}

@media (prefers-color-scheme: dark) {
	main #listing.mosaic {
		background-color: #1d1e1f;
	}
	main #listing.mosaic h2 {
		color: rgba(255, 255, 255, 0.9);
	}
	main #listing.mosaic .item {
		background-color: #1d1e1f;
		color: rgba(255, 255, 255, 0.9);
	}
	main #listing.list .item {
		background-color: #2B2C2D;
	}
	main #listing.list .item:nth-child(even) {
		background-color: #1d1e1f;
	}
	main #listing.list .item.header {
		background: #1d1e1f;
	}
	main #listing.list .item div {
		color: rgba(255, 255, 255, 0.9);
	}
}

.action {
	border-radius: 0.7em;
}

.action .counter {
	border-radius: 0.4em;
	border: none;
	line-height: 1.5em;
}

.overlay {
	background-color: rgba(255, 255, 255, 0.8);
}

.card {
	background-color: var(--background);
	border-radius: 12px;
	-moz-box-shadow: 1.3px 1.3px 1.4px rgba(0, 0, 0, 0.03), 10px 10px 11px rgba(0, 0, 0, 0.06), -1.3px -1.3px 1.4px rgba(0, 0, 0, 0.03), -10px -10px 11px rgba(0, 0, 0, 0.06);
	-ms-box-shadow: 1.3px 1.3px 1.4px rgba(0, 0, 0, 0.03), 10px 10px 11px rgba(0, 0, 0, 0.06), -1.3px -1.3px 1.4px rgba(0, 0, 0, 0.03), -10px -10px 11px rgba(0, 0, 0, 0.06);
	-o-box-shadow: 1.3px 1.3px 1.4px rgba(0, 0, 0, 0.03), 10px 10px 11px rgba(0, 0, 0, 0.06), -1.3px -1.3px 1.4px rgba(0, 0, 0, 0.03), -10px -10px 11px rgba(0, 0, 0, 0.06);
	-webkit-box-shadow: 1.3px 1.3px 1.4px rgba(0, 0, 0, 0.03), 10px 10px 11px rgba(0, 0, 0, 0.06), -1.3px -1.3px 1.4px rgba(0, 0, 0, 0.03), -10px -10px 11px rgba(0, 0, 0, 0.06);
	box-shadow: 1.3px 1.3px 1.4px rgb(0 0 0 / 0%), 10px 10px 11px rgb(0 0 0 / 0%), -1.3px -1.3px 1.4px rgb(0 0 0 / 0%), -10px -10px 11px rgb(0 0 0 / 0%);
	border: 1px solid var(--divider);
}

.card .card-action.full .action {
	border-radius: 1em;
}

.card .button {
	border-radius: 0.6em;
}


.dashboard #nav ul li {
    border-radius: .4em;
}

.dashboard #nav ul li.active:before {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background: var(--blue);
    opacity: .08;
    border-radius: .4em;
}

.dashboard #nav {
	color: rgba(11, 11, 11, 0.9);
}

@media (prefers-color-scheme: dark) {
	.message {
		color: rgba(255, 255, 255, 0.9);
	}
	.action {
		color: rgba(255, 255, 255, 0.9);
	}
	.action:hover {
		background-color: rgba(255, 255, 255, 0.1);
	}
	.overlay {
		background-color: rgba(29, 30, 31, 0.8);
	}
	.card {
		background-color: #1D1E1F;
	}
	.card h3 {
		color: rgba(255, 255, 255, 0.9);
	}
	.button--flat:hover {
		background: rgba(255, 255, 255, 0.1);
	}
	.collapsible > label * {
		color: rgba(255, 255, 255, 0.9);
	}
	.dashboard #nav {
		color: rgba(255, 255, 255, 0.9);
	}
	#loading {
		background: #1D1E1F;
		color: rgba(255, 255, 255, 0.9);
	}
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) or (-moz-backdrop-filter: blur(10px)) or (-ms-backdrop-filter: blur(10px)) or (-o-backdrop-filter: blur(10px)) {
	.overlay {
		background-color: rgba(255, 255, 255, 0);
		-moz-backdrop-filter: blur(10px);
		-ms-backdrop-filter: blur(10px);
		-o-backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
}

.shell {
	background: rgba(255, 255, 255, 0.8);
	color: rgba(11, 11, 11, 0.9);
}

@media (prefers-color-scheme: dark) {
	.shell {
		background-color: rgba(29, 30, 31, 0.8);
		color: rgba(255, 255, 255, 0.9);
	}
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) or (-moz-backdrop-filter: blur(10px)) or (-ms-backdrop-filter: blur(10px)) or (-o-backdrop-filter: blur(10px)) {
	.shell {
		background: rgba(11, 11, 11, 0);
		-moz-backdrop-filter: blur(10px);
		-ms-backdrop-filter: blur(10px);
		-o-backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
}


:root.dark {
    --input-red: rgb(115, 48, 45);
    --input-green: rgb(20, 122, 65);
    --action: rgb(255, 255, 255);
    --background: rgb(20, 29, 36);
    --surfacePrimary: rgb(32, 41, 47);
    --surfaceSecondary: rgb(58, 65, 71);
    --textPrimary: rgb(255 255 255);
    --textSecondary: rgb(255 255 255);
    --divider: rgba(255, 255, 255, .12);
    --iconPrimary: rgb(255, 255, 255);
    --iconSecondary: rgb(255, 255, 255);
    --iconTertiary: rgb(255, 255, 255);
    --hover: rgba(255, 255, 255, .1);
    --borderPrimary: rgba(255, 255, 255, .05);
    --borderSecondary: rgba(255, 255, 255, .15);
    --dividerPrimary: rgba(30, 30, 30, .4);
    --dividerSecondary: rgba(30, 30, 30, .6);
}

:root {
    --blue: #2196f3;
    --dark-blue: #1e88e5;
    --red: #f44336;
    --dark-red: #d32f2f;
    --moon-grey: #f2f2f2;
    --icon-red: #da4453;
    --icon-orange: #f47750;
    --icon-yellow: #fdbc4b;
    --icon-green: #2ecc71;
    --icon-blue: #1d99f3;
    --icon-violet: #9b59b6;
    --input-red: rgb(252, 208, 205);
    --input-green: rgb(201, 242, 218);
    --item-selected: white;
    --action: rgb(84, 110, 122);
    --background: rgb(250, 250, 250);
    --surfacePrimary: rgb(255, 255, 255);
    --surfaceSecondary: rgb(230, 230, 230);
    --divider: rgba(0, 0, 0, .05);
    --iconPrimary: var(--icon-blue);
    --iconSecondary: rgb(255, 255, 255);
    --iconTertiary: rgb(204, 204, 204);
    --textPrimary: #30333a;
    --textSecondary: #30333a;
    --hover: rgba(0, 0, 0, .1);
    --borderPrimary: rgba(0, 0, 0, .1);
    --borderSecondary: rgba(0, 0, 0, .2);
    --dividerPrimary: rgba(255, 255, 255, .4);
    --dividerSecondary: rgba(255, 255, 255, .9)
}

代码如下，点赞点赞，我要升级
我觉得还不错 :tieba_005: :tieba_005:
特别是分享页，把登录栏和顶栏去掉了
卡片风格，还不错的，对吧

3 Likes
2

有点厉害支持～～有点厉害支持～～

1 Like
3

感谢你的分享！

4

整挺好 :smiling_face_with_three_hearts: :smiling_face_with_three_hearts: :smiling_face_with_three_hearts:

5

:tieba_005: :tieba_005:是的 :tieba_005: :tieba_005: