任务栏居中及桌面、登录界面细节美化

任务栏居中及桌面、登录界面细节美化

任务栏居中及桌面、登录界面细节美化

任务栏居中及桌面、登录界面细节美化

将以下代码设置到webos设置–系统–全局代码

<style>
/*桌面图标*/
.desktop>.desktopCont .dskApp {min-height: 100px;max-height: 100px;max-width: 80px;box-sizing: border-box;background: unset !important;justify-content: space-evenly !important;}
.desktop>.desktopCont .dskApp:hover,
.desktop>.desktopCont .dskApp.select{border-radius: 10px;backdrop-filter: blur(12px) saturate(0.9) brightness(1.2) opacity(0.9);}
.desktop>.desktopCont .dskApp.select {box-shadow: 0px 0px 5px -1px #ffffff80 inset;backdrop-filter: blur(12px) saturate(0.9) brightness(1.3) opacity(0.9);}
.desktop>.desktopCont .dskApp .appName{margin-top: 0px !important;width: 100% !important;-webkit-line-clamp: 2 !important; height:auto !important;}
.desktop>.desktopCont .dskApp.select>.uicon.dskIcon,
.desktop>.desktopCont .dskApp:hover>.uicon.dskIcon{transform: scale(1.2);}
/*.desktop>.desktopCont .dskApp.select{height: max-content !important;max-height: max-content;min-height: max-content;padding-top: 12px;padding-bottom: 5px;}
.desktop>.desktopCont .dskApp.select>.appName{margin-top: 12px !important;}*/

/*任务栏*/
.taskbar-component.taskbar{background:unset;}
.taskcont{display: flex;flex-direction: row;align-items: stretch;justify-content: center;}
.taskcont>.taskright {margin-left: 3px !important;position: relative !important;}
.taskcont>.taskright>.taskDate {font-size: 12px;justify-content: center;}
.taskcont>.tasksCont,
.taskcont>.tasksCont>.tsbar{width:auto !important;}
.taskcont>.tasksCont>.tsbar{margin-bottom: .25rem;margin-top: .25rem;}
.taskcont>.taskright>.handcr,
.taskcont>.taskright>.taskDate,
.taskcont>.tasksCont>.tsbar{background: var(--bg1);border-radius: 10px;backdrop-filter: blur(20px) saturate(1.2);}
.taskcont>.sidePane, .taskcont>.calnpane.dpShad{right:auto;}
.taskcont>.sidePane[data-hide=true]{right:0;}
</style>

附上登录页的修改,设置–系统–底部代码

<style>
.fadeinScreen {top: calc(50vh - 266px) !important;}
/*,.fadeinScreen.login-form>div.text-xs.text-gray-400:last-child*/
.bottomInfo{bottom: 12px !important;font-size: 12px;color: rgb(255 255 255 / 50%) !important;}
.bottomInfo>span:last-child>a{line-height: normal !important;}
</style>

当然也可以全局代码直接引入css文件,

<link rel="stylesheet" href="//你的网址/static/css/login.css" />
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
Webos文章福利活动

公众号红包(抽奖兑换)

2023-12-26 10:44:22

Webos文章使用教程

docker部署时增加几个挂载目录

2024-3-9 20:23:37

2 条回复 A文章作者 M管理员
  1. 小林囝

    全局代码如果资源管理器不需要放大,则增加一下样式

    /*资源管理器*/
    .webos-file-panel:not(.in-dragfile) .dskApp:hover {transform: none;}
    .uicon img[data-click=true]:active, .uicon[data-pr=true]:active img {-webkit-transform: none;transform: none;}

  2. 小林囝

    全局代码,深色色彩调整

    /*深色模式*/
    body[data-theme=dark] .sidePane {--bg1: #2c333a;--bg2: #242424;--bg3: #343d42;--bg4: hsl(0deg 0% 100% / 5%);--sliderThumbClr: #3e5761;}
    body[data-theme=dark] .hvlight.active {background: #00000060;}
    body[data-theme=dark] .hvlight:hover {background: #00000080;}

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索