Ecx-UI第五期

  1. 侧栏
  • 一般情况
    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* 侧边栏颜色&悬浮 */
    #aside-content .card-widget {
        position: relative;
        overflow: hidden;
        margin-top: 20px;
        padding: 20px 24px;
        box-shadow: 0px 0px 10px 5px rgb(104, 104, 104) inset;
        background: rgba(236, 240, 0, 0.8);
    }
  • 如果你装了历史上的今天插件，还需要额外添加下面这些，注意是额外添加！，不是替换！
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /* 历史上的今天部分白色bug修复 */
    .history_slide {
        text-align: left;
        font-size: 14px;
        background: var(--card-bg);
        display: flex;
        flex-direction: column;
        background: rgba(0, 0, 0, 0) !important;
        box-shadow: 0px 0px 10px 5px rgb(104, 104, 104);
        align-items: flex-start;
    }

  • 手机端菜单

    1
    2
    3
    4
    5
    6
    #sidebar #sidebar-menus.open {
      background-image: linear-gradient(25deg, #4f73cd, #919fde, #c9ceef, #d7eafc);
    }
    #sidebar #menu-mask {
      background: #ffffff7e;
    }

  • 作者卡片

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    /* 侧边栏作者卡片动态渐变色 */
    #aside-content > .card-widget.card-info {
        background: linear-gradient(
          -45deg,
          #ec0909,
          #bd06ce,
          #0fdbe2,
          #49ec08,
          #f8e800,
          #ec0909
        );
        box-shadow: 0px 0px 10px 5px rgb(128, 128, 128) inset;
        position: relative;
        background-size: 400% 400%;
        -webkit-animation: Gradient 10s ease infinite;
        -moz-animation: Gradient 10s ease infinite;
        animation: Gradient 10s ease infinite !important;
      }
      @-webkit-keyframes Gradient {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }
      @-moz-keyframes Gradient {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }
      @keyframes Gradient {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }
  • 头像变方
    1
    2
    3
    4
    /* 方形头像 */
    .avatar-img {
      border-radius: 20px 20px 20px 20px !important;
    }
  • 框内阴影
    1
    2
    3
    4
    5
    6
    /* 名片框内阴影 */
    .is-center {
        box-shadow: 0px 0px 10px 5px rgb(0 0 0 / 40%);
        border-radius: 10px;
        text-align: center;
    }