点击查看更新记录

更新记录

2021-07-29:初步实现UI

  1. 实现UI风格Demo

2021-07-30:初步实现UI

  1. 使用伪类实现UI改造
  2. 新增几条修复补丁样式
  3. 无魔改源码,纯CSS实现侧栏风格美化

2021-08-02:作者卡片UI改造另起一帖

  1. 作者卡片UI改造为游戏角色属性面板
  2. 魔改方案已迁至新帖:SAO-UI-PLAN—Card-Player
点击查看参考教程
参考方向教程原贴
样式风格参考,图标、音效资源采集SAO Utils
CSS transform 属性CSS transform 属性

预览效果

开发历程

因为是SAO UI PLAN中可以说唯一的纯css项目毕竟总共也就写了三个UI,所以做的进度非常的快。而且原理也非常的简单。

前期尝试是通过对几个空div做变形,再通过盒子模型做位移来达到期望的梯形突起标签效果。

  • 用到的css
    @font-face{
    font-family: 'SAOUI';
    src: url('https://cdn.jsdelivr.net/npm/akilar-candyassets/fonts/SAOUI.ttf');
    font-display: swap;
    }
    #div1 {
    position: relative;/*必须,为了梯形定位*/
    width: 341px;
    height: 500px;
    background: #ebe9ea;
    margin-top: 100px;
    border: 2px solid #877c7e;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    border-top-right-radius: 14px;
    border-top-left-radius: 5px;
    }
    .trapezoidMaxLine {/*最外层梯形所在的div*/
    position: absolute;/*相对于div1定位*/
    /* background: #062343;/*设置成背景色,遮挡下边框*/ */
    z-index: 4;
    height: 27px;/*根据实际情况*/
    width: 150px;/*根据实际情况*/
    top: -29px;/*定位,根据实际情况*/
    left: 8px;
    }
    /*重点来啦!!!最外层梯形代码在此*/
    .trapezoidMaxLine:before {
    content: '';
    position: absolute;/*相对于trapezoidMaxLine定位*/
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border: 2px solid #877c7e;
    border-bottom: 0 solid #fff;
    transform: perspective(6px) rotateX(3deg);
    }
    /*内层梯形所在的div,和最外层的一样,区别是定位参照物,和颜色位置*/
    .trapezoidMinLine {/*内层梯形所在的div*/
    position: absolute;
    z-index: 4;
    height: 27px;
    width: 148px;
    top: 1px;
    left: 1px;
    }
    .trapezoidMinLine:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #ebe9ea;
    border: 1px solid #877c7e;
    border-bottom: 0 solid #fff;
    transform: perspective(6px) rotateX(3deg);
    }
    span.unitName.titleText {
    font-family: 'SAOUI';
    font-size: 20px;
    font-weight: bolder;
    color: rgba(60, 60, 61,0.7)!important;
    top: 10px;
    position: absolute;
    z-index: 5;
    left: 30px;
    width: 100%;
    }
    span.unitName.titleText i{
    margin-right: 10px;
    }
    span.unitName.titleText::after{
    display: block;
    width: 90%;
    margin-left: -10%;
    margin-top: 2px;
    height: 2px;
    content: '';
    background: rgba(160, 159, 160,0.9);
    border-radius: 5px;
    }
    #userVisitEchart{
    background: #fff;
    height: 90%;
    width: 90%;
    margin: 5% 5%;
    }

  • 用到的html
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">
    <div id="div1"><!-- 整个div -->
    <div class="trapezoidMaxLine leftDistance"><!-- 最外层梯形 -->
    <div class="trapezoidMinLine"></div><!-- 内层梯形 -->
    <span class="unitName titleText"><i class="fab fa-chrome"></i>SAO UI PLAN</span>
    </div>
    <div id="userVisitEchart"></div><!-- 柱状图 -->
    </div>

此处灵活运用了csstransform属性中的rotateX形变,也就是沿着X轴的3D旋转。

但是在实装到主题的过程中,遇到了一点阻力。因为写UI的时候是用的空div,想要照搬的话,就需要魔改源码。这种高耦合的做法很不适合最终将其插件化的目的,所以,我尝试使用伪类来实现。

效果还算理想。一开始使用的是侧栏卡片外框的伪类,后来发现这样会给没有标题的侧栏也添加一个梯形突起,所以很迅速的换到了标题栏所在的div里。代价则是,伪类定位需要判断的情况更复杂了,而且手机端和电脑端的效果有微妙的不同,猜测是分辨率以及我滥用百分比作为适配单位的关系。

最后造成的情况就是,虽然可以实现UI的变动,但是css属性的可移植性极差,没法适配任何人的主题,只能作为原理帖来简述。如果是其他人要使用的话,要自己根据主题进行微调。这部分主要体现在便签微妙的偏移量上。

侧栏卡片UI重新

  1. 唯一需要做的事情就是添加一个CSS。在[Blogroot]\themes\butterfly\source\css\custom.css中添加如下内容。
    /* SAOUI字体精简包,仅73KB */
    @font-face{
    font-family: 'SAOUI';
    src: url('https://cdn.jsdelivr.net/npm/akilar-candyassets/fonts/SAOUI.ttf');
    font-display: swap;
    }
    /* 应用于除了作者卡片以为的所有侧栏卡片 */
    .card-widget:not(.card-info) {
    overflow: visible !important;
    margin-bottom: 45px !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border-top-left-radius: 0px !important;
    font-family: 'SAOUI' !important;
    color: rgba(60,60,61,0.7) !important;
    font-weight: bold;
    }
    /* 修复一下对侧栏电子钟的覆盖 */
    .card-widget.card-clock {
    overflow: hidden !important;
    border-radius: 8px !important;
    }
    /* 定义标题栏的定位方式为绝对定位 */
    .item-headline {
    font-family: 'SAOUI' !important;
    color: rgba(60,60,61,0.7) !important;
    font-weight: bold;
    position: absolute;
    z-index: 4;
    height: 27px;
    width: 65%;
    top: -27px;
    left: 7px;
    }
    /* 标题栏下各元素的层级,保证它们能显示在伪类之上 */
    .item-headline i {
    position: relative;
    top: 0px;
    margin-left: 5%;
    z-index: 2;
    }
    .item-headline span {
    position: relative;
    top: 0px;
    z-index: 2;
    }
    .item-headline a {
    position: relative;
    top: 0px;
    z-index: 2;
    }
    /* 梯形伪类 */
    .item-headline:after {
    content: '';
    position: absolute;
    top: -3px;
    right: 0;
    bottom: 0;
    left: -3px;
    z-index: 1;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.9);
    border-bottom: 0 solid #fff;
    /* 关键形变 */
    transform: perspective(20px) rotateX(3deg);
    border-top-right-radius: 5px !important;
    border-top-left-radius: 5px !important;
    }
    /* 下划线伪类 */
    .item-headline:before {
    display: block;
    width: 140%;
    margin-top: 2px;
    height: 2px;
    content: '';
    background: rgba(160,159,160,0.9);
    border-radius: 5px;
    top: 40px;
    left: 0;
    position: relative;
    }
    /* 针对手机样式的偏移量调整 */
    @media screen and (max-width: 800px) {
    .item-headline {
    left: 8px;
    }
    }
    /* 夜间模式色彩适配,此处仅代表糖果屋夜间模式配色 */
    [data-theme="dark"] .card-widget:not(.card-info) {
    color: rgba(255,255,255,0.7) !important;
    }
    [data-theme="dark"] .item-headline {
    color: rgba(255,255,255,0.7) !important;
    }
    [data-theme="dark"] .item-headline:after {
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(0,0,0,0.5);
    border-bottom: 0 solid rgba(0,0,0,0.5);
    }
    [data-theme="dark"] .item-headline:before {
    background: rgba(255,255,255,0.9);
    }
  2. 然后在[Blogroot]\_config.butterfly.yml中引入即可。
    inject:
    head:
    - <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">

    侧栏作者卡片样式重构

    方案内容非高耦合,可另做讨论,存在插件化可行性。已迁至新帖:SAO-UI-PLAN—Card-Player

    预期计划是尽可能保留现有的作者卡片元素,但是会完全重写dom结构。配置项则不做改动。尽可能将改动压缩在一个pug文件和一个styl文件里。以便将来可以将其制作成侧栏插件。

    重写作者卡片UI,改成游戏角色属性面板

    常规显示头像,鼠标悬停翻转显示人物属性卡片

    常规显示站点描述,鼠标悬停翻转显示social icon

    点击头像,持续显示站点描述(废案)

TO DO

侧栏卡片UI改造’

使用伪类实现UI改造