openlist美化
|
Server系列
|
chenrui463
|

1837 字
|
11 分钟

添加到自定义头部：

 

 

 

<style>
:root {
–mio-main: 255, 255, 255;
–mio-text: 0, 0, 0;
/* 将所有粉色相关的颜色变量都改为蓝色 */
–mio-primary: 0, 191, 255; /* 主色：天蓝色 */
–mio-primary50: 135, 206, 250; /* 浅天蓝色 */
–hope-colors-primary1: 240, 249, 255; /* 最浅蓝色 */
–hope-colors-primary2: 224, 242, 254; /* 浅蓝色 */
–hope-colors-primary3: 186, 230, 253; /* 蓝色 */
–hope-colors-primary4: 125, 211, 252; /* 中蓝色 */
–hope-colors-primary5: 56, 189, 248; /* 主蓝色 */
–hope-colors-primary6: 14, 165, 233; /* 深蓝色 */
–hope-colors-primary7: 2, 132, 199; /* 更深的蓝色 */
–hope-colors-primary8: 3, 105, 161; /* 深蓝 */
–hope-colors-primary9: 7, 89, 133; /* 最深蓝色 */
–hope-colors-primary10: 12, 74, 110; /* 暗蓝色 */
–hope-colors-primary11: 8, 47, 73; /* 最暗蓝色 */
–hope-colors-pink1: 240, 249, 255; /* 覆盖粉色系1 */
–hope-colors-pink2: 224, 242, 254; /* 覆盖粉色系2 */
–hope-colors-pink3: 186, 230, 253; /* 覆盖粉色系3 */
–hope-colors-pink4: 125, 211, 252; /* 覆盖粉色系4 */
–hope-colors-pink5: 56, 189, 248; /* 覆盖粉色系5 */
–hope-colors-pink6: 14, 165, 233; /* 覆盖粉色系6 */
–hope-colors-pink7: 2, 132, 199; /* 覆盖粉色系7 */
–hope-colors-pink8: 3, 105, 161; /* 覆盖粉色系8 */
–hope-colors-pink9: 7, 89, 133; /* 覆盖粉色系9 */
–hope-colors-pink10: 12, 74, 110; /* 覆盖粉色系10 */
–hope-colors-pink11: 8, 47, 73; /* 覆盖粉色系11 */
–mio-main-opacity: 0.3;
–hope-colors-info9: rgba(var(–mio-primary), 1);
–hope-colors-info4: rgba(var(–mio-primary), 1);
–hope-colors-info5: rgba(var(–mio-primary50), 1);
–hope-colors-info11: rgba(var(–mio-main), 1);

.hope-ui-dark {
–mio-main: 0, 0, 0;
–mio-text: 255, 255, 255;
–mio-main-opacity: 0.3;
–hope-colors-info9: rgba(var(–mio-primary), 1);
–hope-colors-info4: rgba(var(–mio-primary), 0.4);
–hope-colors-info5: rgba(var(–mio-primary50), 0.4);
–hope-colors-info11: rgba(var(–mio-primary50), 1);
}
}

/**白天背景稍亮*/
body.hope-ui-light::before {
filter: blur(3px) brightness(0.7);
}
/**夜间背景稍暗*/
body.hope-ui-dark::before {
filter: blur(3px) brightness(0.3);
}

div#root {
position: relative;
z-index: 1;
}

/**管理后台*/
div#root div.hope-c-PJLV-iiLzBwx-css {
background: transparent;
}

/**头部*/
div#root div.hope-c-PJLV-iiLzBwx-css header {
background-color: rgba(var(–mio-main), 0.3);
}

/**内容区*/

/**侧边栏*/
div.hope-c-PJLV-ibpTetR-css > div:first-child {
background-color: rgba(var(–mio-main), 0.3);
}

div.hope-c-PJLV-ibpTetR-css > div:first-child div.hope-c-PJLV-ibBheSN-css {
color: var(–mio-main);
}

/**tag a*/
div.hope-c-PJLV-ibpTetR-css > div:first-child a.hope-c-PJLV-ikmVjeJ-css {
color: rgba(var(–mio-primary));
background-color: rgba(var(–mio-primary), 0.2);
}
/**暗色模式*/
div.hope-c-PJLV-ibpTetR-css > div:first-child .hope-c-PJLV-ijrehjy-css {
background: rgba(var(–mio-main), 0.3);
}
/**亮色模式*/
div.hope-c-PJLV-ibpTetR-css > div:first-child .hope-c-PJLV-ikaEncD-css {
background: rgba(var(–mio-primary), 0.3);
}

/**主内容区*/
/**卡片*/
div.hope-c-PJLV-ibpTetR-css
div.hope-c-PJLV-ijycFhp-css
div.hope-c-PJLV-iiBrJnl-css,
div.hope-c-PJLV-ibpTetR-css
div.hope-c-PJLV-ijycFhp-css
div.hope-c-PJLV-iiVJRSE-css {
transition: all 0.2s ease-in-out;
background: rgba(var(–mio-main), 0.3);
}

div.hope-c-PJLV-ibpTetR-css
div.hope-c-PJLV-ijycFhp-css
div.hope-c-PJLV-iiBrJnl-css:hover,
div.hope-c-PJLV-ibpTetR-css
div.hope-c-PJLV-ijycFhp-css
div.hope-c-PJLV-iiVJRSE-css:hover {
border-color: rgba(var(–mio-primary), 0.7);
}

/**字段*/
.hope-c-kvTTWD-hYRNAb-variant-filled {
background-color: rgba(var(–mio-main), 0.2);
}

.hope-c-kvTTWD-hYRNAb-variant-filled:hover,
.hope-c-kvTTWD-hYRNAb-variant-filled:focus {
background-color: rgba(var(–mio-main), 0.7);
border-color: rgba(var(–mio-primary), 0.5);
}

/**开关*/
.hope-c-mHASU-byiOue-variant-filled {
color: rgb(var(–mio-primary), 0.5);
background-color: rgba(var(–mio-main), 0.2);
}

.hope-c-mHASU-byiOue-variant-filled[data-checked] {
background-color: currentcolor;
}

.hope-c-mHASU-byiOue-variant-filled[data-focus] {
box-shadow: 0 0 0 3px var(–mio-primary);
border-color: var(–mio-primary);
}

/**头部*/
div#root div.header {
background: transparent;
}

div#root div.header .header-left {
width: 40px;
height: 40px;
}

div#root div.header .header-right > button {
background: transparent;
}

div#root div.header svg {
color: rgba(var(–mio-primary));
}

/**内容部分*/

div#root div.body {
min-height: calc(100vh – 102px);
}

/*导航部分*/
div#root div.body nav.nav {

background: transparent;
}
div#root div.body nav.nav::after {
background-color: transparent;
}

/*列表部分 – 强制修改所有图标颜色为蓝色 */
div#root div.body div.obj-box {
background-color: rgba(var(–mio-main), var(–mio-main-opacity));
min-height: 300px;
max-height: calc(100vh – 170px);
overflow-y: auto;
backdrop-filter: blur(1px);
/* 列表内所有文字变为白色 */
color: white !important;
}

/* 强制修改所有图标为蓝色 – 强力覆盖 */
div#root div.body div.obj-box svg *,
div#root div.body div.obj-box svg,
div#root div.body div.obj-box path,
div#root div.body div.obj-box g {
fill: rgba(var(–mio-primary), 1) !important;
color: rgba(var(–mio-primary), 1) !important;
stroke: rgba(var(–mio-primary), 1) !important;
}

/* 文件图标特殊处理 */
div#root div.body div.obj-box svg[data-icon=”folder”],
div#root div.body div.obj-box svg[class*=”folder”],
div#root div.body div.obj-box svg[data-icon=”file”],
div#root div.body div.obj-box svg[class*=”file”] {
fill: rgba(var(–mio-primary), 0.9) !important;
color: rgba(var(–mio-primary), 0.9) !important;
}

div#root div.body div.obj-box::-webkit-scrollbar {
width: 4px;
transition: all 0.3s ease-in-out;
}

div#root div.body div.obj-box::-webkit-scrollbar-thumb {
cursor: pointer;
border-radius: 8px;
transition-duration: 150ms;
background: rgba(var(–mio-text), 0.15);
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

div#root div.body div.obj-box::-webkit-scrollbar-track {
border-radius: 8px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.05);
}

div#root div.body div.obj-box::-webkit-scrollbar-thumb:hover {
background-color: rgba(var(–mio-primary), 0.4);
}

div#root div.body div.obj-box span.hope-c-iojPKw svg {
color: rgba(var(–mio-main), 1);
}

/*底部MD*/
div#root div.body div.hope-c-PJLV-ikSuVsl-css,
div#root div.body .hope-c-PJLV-iiuDLME-css {
background-color: rgba(var(–mio-main), var(–mio-main-opacity));
backdrop-filter: blur(5px);
}

/**MD*/
.markdown-body {
font-family: inherit !important;
}

.markdown-body > ul > li::marker {
color: rgba(var(–mio-primary), 1);
}

/**侧边栏*/
div#root div.body div.hope-c-PJLV-ieGWMbI-css {
background-color: rgba(var(–mio-main), var(–mio-main-opacity));
}

div#root div.body div.hope-c-PJLV-ieGWMbI-css p.hope-c-PJLV-iZZmce-css {
background-color: rgba(var(–mio-primary), 0.7);
}

div#root div.body div.hope-c-PJLV-ieGWMbI-css p.hope-c-PJLV-igSqJIB-css {
text-overflow: ellipsis;
overflow: hidden;
max-width: 200px;
}

/* 侧边栏图标也改为蓝色 */
div#root div.body svg,
div#root svg,
div#root svg * {
color: rgba(var(–mio-primary), 1) !important;
fill: rgba(var(–mio-primary), 1) !important;
}

/**工具栏*/
div.left-toolbar-box,
div.center-toolbar {
z-index: 1;
}

div.left-toolbar-box div.left-toolbar {
background-color: rgba(var(–mio-main), 0.8);
}

div.left-toolbar-box div.left-toolbar svg.hope-icon,
div.left-toolbar-box svg.hope-icon {
color: rgba(var(–mio-primary));
}

div.left-toolbar-box div.left-toolbar svg.hope-icon:hover,
div.left-toolbar-box svg.hope-icon:hover {
color: rgba(255, 255, 255, 1);
background-color: rgba(var(–mio-primary));
}

/**返回顶部*/
div.hope-c-PJLV-ihMpUpe-css {
background-color: rgba(var(–mio-primary)) !important;
}

/**tooltip提示*/
div.hope-tooltip {
color: rgba(255, 255, 255, 1);
background-color: rgba(var(–mio-primary), 1);
}

/**加载图标*/
div.hope-spinner {
color: rgba(var(–mio-primary));
}

/**menu下拉区域*/
div.hope-menu__content {
background-color: rgba(var(–mio-main), var(–mio-main-opacity));
}

/**select下拉区域*/
div.hope-c-XJURY {
background: rgba(var(–mio-main), 0.8);
}

/**登录页*/
div.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-ifJliWT-css,
div.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-igjRXTJ-css {
display: none;
}
div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-ibiABng-css,
div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-ihWgyFw-css {
background-color: transparent;
}

/**登录框*/
div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-iubUra-css,
div.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-ifjOQLV-css {
background-color: rgba(var(–mio-main), 0.5);
backdrop-filter: blur(5px);
}

div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-idKXllh-css a {
display: none;
}

/* ================= 新增：底部版权文字变白 ================= */
div#root footer,
div#root .footer,
div#root > div:last-child,
div[class*=”footer”],
div[id*=”footer”],
div#root > div:last-of-type,
div[class*=”copyright”] {
color: white !important;
}

/* 文本选中高亮改为天蓝色 */
::selection {
background-color: rgba(var(–mio-primary), 0.3) !important;
color: white !important;
}
::-moz-selection {
background-color: rgba(var(–mio-primary), 0.3) !important;
color: white !important;
}
</style>

 

 

 

添加自定义内容代码：

<script>
// 获取要设置背景图的元素，假设是body元素
const element = document.body;

// 指定图片的URL
const imageUrl = ‘http://192.168.1.55:1234’; // 填你自己的图片api

// 设置CSS背景图及自适应属性
element.style.backgroundImage = `url(${imageUrl})`;
element.style.backgroundSize = ‘cover’;
element.style.backgroundPosition = ‘center’; // 背景图居中显示
</script>

暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																				
					
									

			

			
			
		

	






上一篇

                    

                    
			        推荐文章
		            

		            

							
Github项目介绍目录