/*作者：香水*/

/*简易的时间美化纯css,请自行修改扩展，集成到你的index.css或者设置的footer都行*/


/*引入时间数字google字体，可自行修改其他字体*/
@import url('/custom/甜甜圈海报字体.woff2');
 
 
 /*标题改左上*/
 .absolute .logo
{ 
 position: absolute;
    top: 20px;
    left: 20px;
    padding-left: 35px
}
.absolute .logo .md\:text-6xl{
          font-size: 1.75rem;}
/*删除竖线*/
.text-base {display: none}
 
.clock{position: relative;top: -50px;
                 --yell: #F5CE5A;}
.clock.w-full{    width: fit-content;}
 
.clock .md\:block{display: inline}
.clock span.clock-time{font-size: 55px;    font-family: "Zen Dots", sans-serif;
  font-weight: 400;
  font-style: normal;}
span.clock-date,span.clock-week{position: absolute;
    font-size: 23px; 
       font-weight: 900;
    inset:-45px auto  auto -30px;}
.clock:after,.clock:before{content: "";
position: absolute;
width: 50px;}


.clock:before{ border-left: 5px solid var(--yell);
    border-bottom: 5px solid var(--yell);
     inset:0 auto -20px -20px;
    border-radius: 0 28px;}
.clock:after{    border-right: 5px solid var(--yell);
    border-top: 5px solid var(--yell);
    inset:-25px  -20px 10px auto;
    border-radius: 0 28px;}
span.clock-week{   font-weight: 700; 
    inset:auto -30px -30px auto;
    font-size: 19px;}
 
   
 


/* 自定义字体 */
@font-face {
    font-family: "Font";
    src: url("/custom/甜甜圈海报字体.woff2"); /* 自行下载字体存放至sunpanel安装目录的./conf/custom/文件夹下 */
  }
  
  /* 自定义全局字体 */
  * {
    font-family: Font;
  }
  /*鼠标悬停动画 */

/* 当鼠标悬停在图标信息框上时触发动画 */
/* 详细图标摇晃动画 */
.icon-info-box .rounded-2xl:hover {
    background: #c2eab2e6 !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: #c2eab2e6 !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);
    }
  }