Sun-panel美化自定义CSS篇

admin2024-06-11  98

已经修改的内容如下

 

/* 自定义页面背景 */
.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-headergroup-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);
  }
}

转载请注明原文地址:http://198484.com/?read-175.html
000

最新回复(0)