Widget:HeroCompendium

<style>/* 容器相关 */ .boxcc {

   height: 80vh;
   display: flex;

} .boxcc-1 {

   position: sticky;
   top: 20px;
   z-index: 100;
   width: 40%;
   height: 80vh;
   background: #f0f0f0;
   border: 1px solid #000000;
   display: flex;
   flex-direction: column;

} .boxcc-11 {

   height: 60px;
   flex-shrink: 0;
   border: 1px solid #000000;
   display: flex;
   padding: 5px;
   box-sizing: content-box;

} .boxcc-111 {

   width: 60px;
   flex-shrink: 0;

} .boxcc-112 {

   flex: 1;

} .boxcc-12 {

   line-height: 30px;
   flex-shrink: 0;
   border: 1px solid #000000;
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
   padding: 5px;

} .boxcc-121 {

   flex-shrink: 0;
   border: 4px outset rgb(0 0 0 / 50%);
   display: flex;
   border-radius: 10%;
   padding: 0 0.5em;
   background-color: #007bff;
   color: white;
   box-shadow: none;
   transition: all 0.2s ease;

} .boxcc-121:hover {

   background-color: #0056b3;
   box-shadow: none;
   border: 4px inset rgb(0 0 0 / 50%);

} .boxcc-121.active, .boxcc-121:active {

   background-color: #004085;
   box-shadow: none;
   border: 4px inset rgb(0 0 0 / 50%);
   transform: translateY(1px);

} .boxcc-13 {

   flex: 1;
   border: 1px solid #000000;
   overflow: auto;

} .boxcc-2 {

   width: 60%;
   background: #fff;
   border: 1px solid #000000;
   display: flex;
   flex-direction: column;
   overflow: auto;

} .boxcc-21,.boxcc-22,.boxcc-23,.boxcc-24 {

   border: 1px solid #000000;
   flex: 1;
   padding: 0 1em 1em;

} .boxcc-211 {

   height: 50px;
   border: 1px solid transparent;

} .boxcc-221 { } .boxcc-222 {

   height: auto;

} .boxcc-212 {

   height: auto;
   padding: 15px;
   background:#595959; color:white;

} .boxcD {

   background: #f0f0f0;
   border: 1px solid #000000;
   display: flex;
   flex-direction: column;

} .boxcD-11 {

   border: 1px solid #000000;

} .boxcD-111 {

   display: flex;
   flex-direction: column;
   padding: 0 1em;

} .boxcD-1111 {

   border: 1px solid #000000;

} .boxcD-112 {

   border: 1px solid #000000;
   flex: 1;

} .boxcD-12 {

   padding: 5px;
   border: 1px solid #000000;

} .boxR {

   width: 8vw;
   min-width: 64px;
   position: fixed;
   left: 32px;
   bottom: 32px;
   background: #8888;
   z-index: 100;
   transform: scaleX(-1);

}

/* 立绘相关 */ .target-group-2 ul.tabbernav, .target-group-2 .tabbertab, .boxcc-232 .tabbertab{

   padding: 0;
   border: none;

} .target-group-2 img {

   height: 100%;
   object-fit: contain;

} .target-group-2 .tabbertab img {

   height: calc(100% - 32px);

}

.skill-tabs-list {

   display: flex;
   background-color: #000;
   border-radius: 55px;
   position: relative;
   overflow: hidden;
   width: 100;
   gap: 0;
   padding: 0;
   margin: 0;
   justify-self: center;
   user-select: none;

}

.circle {

   width: 50px;
   height: 50px;
   border-radius: 50%;
   display: flex !important;
   justify-content: center;
   align-items: center;
   color: #666666;
   font-size: 20px;
   font-weight: bold;
   z-index: 2;
   transition: color 0.3s ease;
   
   background: transparent;
   border: none;
   margin: 0;

}

.active-indicator {

   width: 44px;
   height: 44px;
   border-radius: 50%;
   background-color: #A2FF17;
   color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   transition: transform 0.3s ease;
   z-index: 1;
   top: 3px;
   left: 3px;
   border: 3px solid #000;
   box-shadow: 0px 0px 3px 3px #ffffff;

}

.circle.active {

   color: #fff;

}

.skill-tabs {

   display: grid;
   background: #636362;
   border-radius: 0 0 35px 35px;
   padding: 0 10px 10px 10px;

} .skill-tabs-content {

   display: block;
   font-weight: bold;
   text-align: left;

} .skill-tabs-content-head {

   background:#000;
   padding: 0 0 1px 0.5em;

} .skill-tabs-content-body {

   color:#fff;
   line-height: 1.5em;
   padding: 0.5em;

}

.gallerybox .gallerytext, .gallerybox .gallerycaption {

   display: none;

} .panel-body {

   padding: 0;

} .attribute-value {

   font-family:'Showcard Gothic',Arial;
   font-size: 20px;
   font-weight: lighter;

}</style>