已经修改的内容如下
/* 自定义页面背景 */
.sun-main {
background: #f9f9f9;
}
/* 自定义文字阴影 */
.text-shadow[data-v-15580241],.text-shadow[data-v-679daf12],.divider {
color: #333333;
text-shadow: none !important;
}
/* 自定义搜索框 */
.search-container {
background: rgba(211,211,211,0.3) !important;
border: 1px solid #e9e9e9 !important;
}
input[data-v-d2b10c26] {
color: #333333;
}
input[data-v-d2b10c26]::placeholder {
color: #bbbbbb;
}
.search-container:hover,.focused,.focused:hover {
box-shadow: none !important;
border: 1px solid #dfdfdf !important;
}
/* 自定义系统状态卡片 */
.system-monitor-header,.group-title {
background: url(/custom/postcard.svg);
padding-left: 35px;
background-size: 26px 26px;
background-repeat: no-repeat;
background-position: left;
font-width: normal;
}
/* 自定义系统状态进度条 */
.n-progress {
max-width: 600px !important;
}
/* 自定义SVG小图标颜色 */
.svg-icon .svg-use {
color: #333333 !important;
}
/* 自定义项目卡片 */
.item-list .icon-info-box .app-icon .app-icon-info,.system-monitor .icon-info-box .generic-monitor-card .item-card .item-card-info {
height: 86px;
cursor: pointer;
padding: 8px 0px 0px 0px;
border-radius: 4px;
border: 1px solid #e4ecf3;
margin: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.item-list .icon-info-box .app-icon .app-icon-info:hover,.system-monitor .icon-info-box .generic-monitor-card .item-card .item-card-info:hover {
transform: translateY(-6px);
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
-webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
-moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/* 自定义项目卡片间距 */
.icon-info-box[data-v-15580241],.icon-info-box[data-v-679daf12] {
grid-template-columns: repeat(auto-fill,minmax(300px,1fr)) !important;
gap: 20px !important;
grid-column-gap: 30px !important;
}
/* 自定义项目卡片图标 */
.item-list .icon-info-box .app-icon .app-icon-info .app-icon-info-icon .app-icon-info-text-box {
transform: translateY(-50%);
position: absolute;
margin-left: 50px;
top: 50%;
}
/* 自定义项目卡片标题字体 */
.font-semibold {
font-size: 15px;
}
/* 自定义项目卡片描述字体 */
.text-xs {
color: #888888;
}
sun-main：控制整个页面的背景颜色。
text-shadow[data-v-15580241]：这个text-shadow是控制字体阴影效果，包括LOGO和分组标题的文字颜色都可以用这个属性控制。因为sun-panel的前端是基于VUE的，所以会有data-v-15580241这样的标签。
text-shadow[data-v-679daf12]：这个跟上面的是一样，只不过这个控制的是系统状态分组的文字效果。
system-monitor-header和group-title：这是分组的标题。
divider：这个是控制那个“|”分隔线的。
svg-icon和svg-use：控制页面中的SVG图像，包括分组中用来添加或排序的按钮图标，以及搜索框中的搜索按钮。
item-card-info：这个就是控制单个项目的卡片样式，但不包括系统状态项目。
item-card-info:hover：这个是单个项目卡片鼠标放上去时候的样式。
icon-info-box[data-v-15580241]和icon-info-box[data-v-679daf12]：控制分组中每个项目卡片之间的间隔，属于grid布局的，需要用到grid布局中的一些属性和参数。例如grid-template-columns就是列，gap就是间隔距离，grid-column-gap就是列与列之间的间隔距离。如果是grid-template-row就是行，grid-row-gap就是行与行之间的间隔距离。
n-progress：这个是系统状态卡片中的进度条。当整个系统状态卡片被拉宽之后，需要用这个属性将进度条的长度加长，默认的是135px，这个值还是默认的最大值，也就是说，不管卡片被拉到多宽，进度条最长也只有135px的长度。
app-icon-info-text-box：这是单个项目卡片中文字那一块的属性，就是标题和描述那一块。
font-semibold：控制单个项目的标题文字。
text-xs：控制单个项目的描述文字。
目前修改的基本上就是这些内容，因为单个项目的图标大小不用改，就没有在修改的内容中。如果要改的话，是由app-icon-info-icon这个属性控制。
上面的内容还不算是美化，只能说是可以按照自己想要的效果进行修改了。下面附上大佬进行美化的一些内容，复制粘贴进自定义CSS文件里面即可，注意要清除缓存。
自定义字体
定义字体名MC (虽然字体出处不是MC)
用*直接全局替换字体
字体出自游戏:主播女孩重度依赖
如字体文件不生效，请确保路径文件正确或字体可以正常使用。
建议先用我这提供的字体进行测试再使用自定义字体！
附件：字体文件下载
/* 自定义字体 */
@font-face {
font-family: "MC";
src: url("/custom/DinkieBitmap-9px.ttf");
}
/* 自定义全局字体 */
* {
font-family: MC;
}
自定义光标
用body定义默认鼠标样式
.cursor-pointer定义悬浮鼠标样式
(这应该是个笨办法，但是我尽力了，我尝试了很多办法只有这个生效了)
光标由Custom-Cursor提供
/* 定义新光标样式 */
body {
cursor: url(https://cdn.custom-cursor.com/db/4828/32/arrow2747.png), default !important;
}
/* 自定义悬浮光标 */
.cursor-pointer {
cursor: url(https://cdn.custom-cursor.com/db/4827/32/arrow2747.png), auto !important;
}
自定义footer
这个页脚是为了我自己的页面定制的
给网页计时器稍微排了一下
也给播放器歌词预留了空间
/* 自定义footer */
.footer {
color: #ffffff; /* 文字颜色设置为白色 */
position: fixed; /* 设置定位为固定位置 */
left: 50%; /* 距离左边50%的位置 */
transform: translateX(-50%); /* 通过transform属性水平居中 */
bottom: 40px; /* 距离底部40像素的位置 */
width: 100%; /* 宽度100% */
height: auto; /* 高度自动调整 */
min-height: 50px; /* 最小高度为50像素 */
z-index: 9999; /* 设置层级为9999 */
display: flex; /* 使用弹性盒子布局 */
justify-content: center; /* 在主轴上居中对齐 */
align-items: center; /* 在交叉轴上居中对齐 */
flex-direction: column; /* 设置主轴为垂直方向，使子元素纵向排列 */
line-height: 1.8; /* 行高为1.8倍 */
pointer-events: none; /* 不接受鼠标事件 */
}
背景线条样式
代码由Sun-Panel 交流2群 香水 提供
/* 背景线条样式 BY 香水 [二群大佬提供] */
/* 伪元素创建背景线条样式 */
.w-full .font-semibold:before {
position: absolute; /* 设置为绝对定位 */
width: 95px; /* 宽度为95像素 */
display: block; /* 设置为块级元素 */
height: 75px; /* 高度为75像素 */
content: ""; /* 伪元素内容为空 */
border-radius: 50%; /* 边框半径为50%，形成圆形 */
z-index: -1; /* 设置层级为-1，将其放在内容之后 */
right: -27px; /* 距离右边-27像素的位置 */
top: -35px; /* 距离顶部-35像素的位置 */
background: #ffffff3b; /* 背景颜色为淡白色带透明度的3b */
box-shadow: -8px 21px 0 #ffffff1a; /* 设置阴影效果，水平偏移-8px，垂直偏移21px，颜色为淡白色带透明度的1a */
}
/* 伪元素创建另一种背景线条样式 */
.w-full .font-semibold:after {
position: absolute; /* 设置为绝对定位 */
width: 40px; /* 宽度为40像素 */
display: block; /* 设置为块级元素 */
height: 40px; /* 高度为40像素 */
border: 4px solid #ffffff3b; /* 边框为4像素的实线，颜色为淡白色带透明度的3b */
content: ""; /* 伪元素内容为空 */
border-radius: 50%; /* 边框半径为50%，形成圆形 */
top: -19px; /* 距离顶部-19像素的位置 */
right: 48px; /* 距离右边48像素的位置 */
z-index: -1; /* 设置层级为-1，将其放在内容之后 */
}
/* 设置图标信息框的圆角样式 */
.icon-info-box .rounded-2xl {
position: relative; /* 设置为相对定位 */
border-radius: 15px; /* 设置边框半径为15像素，形成圆角 */
overflow: hidden; /* 超出部分隐藏 */
-webkit-backdrop-filter: blur(10px); /* 使用Webkit前缀的背景滤镜，模糊程度为10像素 */
backdrop-filter: blur(10px); /* 背景滤镜，模糊程度为10像素 */
}
鼠标悬停动画
鼠标悬停时图标摇晃并且颜色变深
这段代码已经适配了详细图标和小图标
他们的摇晃程度都不一样
/*鼠标悬停动画 */
/* 当鼠标悬停在图标信息框上时触发动画 */
/* 详细图标摇晃动画 */
.icon-info-box .rounded-2xl:hover {
background: rgba(42, 42, 42, 0.7) !important;/* 背景颜色变成深灰色 */
-webkit-animation: info-shake-bounce .5s alternate !important;
-moz-animation: info-shake-bounce .5s alternate !important;
-o-animation: info-shake-bounce .5s alternate !important;
animation: info-shake-bounce .5s alternate !important;
}
/* 小图标摇晃动画 */
.icon-small-box .rounded-2xl:hover {
background: rgba(42, 42, 42, 0.7) !important;/* 背景颜色变成深灰色 */
-webkit-animation: small-shake-bounce .5s alternate !important;
-moz-animation: small-shake-bounce .5s alternate !important;
-o-animation: small-shake-bounce .5s alternate !important;
animation: small-shake-bounce .5s alternate !important;
}
/* 定义摇详细图标晃弹跳动画的关键帧 */
@keyframes info-shake-bounce {
0%,
100% {
transform: rotate(0);
}
25% {
transform: rotate(10deg);
}
50% {
transform: rotate(-10deg);
}
75% {
transform: rotate(2.5deg);
}
85% {
transform: rotate(-2.5deg);
}
}
/* 定义摇小图标晃弹跳动画的关键帧 */
@keyframes small-shake-bounce {
0%,
100% {
transform: rotate(0);
}
25% {
transform: rotate(15deg);
}
50% {
transform: rotate(-15deg);
}
75% {
transform: rotate(5deg);
}
85% {
transform: rotate(5deg);
}
}
