Widget:面板计算器/css

<style>

.DrawTarget {

   color: #7a5d4b;

}

li {

   list-style: none;

}

.DrawTarget img {

/*   width: 40px;  */
   margin: 0;

}

.DrawTarget li {

   margin: 10px;
   justify-content: space-between;

} .star-1{ font-weight: bold; color: #d7aa0a; } .star-2{ color: #8313d7; } .star-3{ color: #0c75bf; }

tupo img {

   width: 30px;
   border-radius: 50%;

}

tupo {

   width: 90%;
   background: #fdfdfd;
   padding: 10px;
   border: 1px #ad9381 solid;
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;

}

input {

   width: 150px;
   /* padding-left: 80px; */

}

.input-entry {

   /* border: 1px #ad9381 solid;*/
   border-radius: 50px;
   padding: 0 2px;
   margin: 0 5px;
   min-width: 20%;
   position: relative;
   height: 30px;
   line-height: 30px;

display:inline-block; }

.input-num {

   position: relative;
   padding: 2px 6px;
   width: 80px;

}

.input-num span {

   position: absolute;
   left: 20px;

}

input, select {

   padding: 2px 6px;
   border: 0;
   border-radius: 50px;
   margin: 0 5px;
   border-bottom: 1px #ad9381 solid;
   min-width: 80px;
   text-align: center;

}

.btn {

   border-radius: 50px;
   width: 100%;
   background: #9c877a;
   color: #fff;

}

.BF-SliderBox {

   display: inline-block;
   margin: 0 20px;

}

.BF-Slider {

   padding: 0;

} .StoneCombo-Box{

   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   gap: 10px;
   padding: 10px 0;

} .StoneCombo-Button{

   box-sizing: border-box;
   flex-basis: 46%;
   border-radius: 4px;
   border: 1px solid #ad9381;

}

.StoneCombo-Button.pressed {

   background-color: #f8e8c5;/* 按钮被按下时的背景颜色 */
   color: #220a05;/* 按钮被按下时的文本颜色 */
   border: 1px solid #d59f27;

} i.StoneCombo-Button {

   border: none;

} .btn-disabled {

   background-color: #bfbfbf; /* 按钮禁用时的背景颜色 */
   color: #ada5a1; /* 按钮禁用时的文本颜色 */
   border-radius: 4px;

} .com_li {

   padding: 10px;
   background: #fbfbfb;
   margin: 10px;
   border: 1px #ad9381 solid;
   border-radius: 4px;

}

 #show-portrait>.gacha-0{
  width:100%; 
 }

.flex-col-c { display: flex; flex-direction: column; align-items: center; }

.flex-col-c>* {

   margin: 4px 0;

} input,select {

   margin: 2px 0;

} input[type="number"] {

  /* padding: 2px 0 2px 12px;*/
 padding: 2px;
 }

.DrawTarget h2 {

   margin: 0;

}

.mw-parser-output h2 {

   color: #5f1413;
   margin: 10px 0 ;
   padding-bottom:10px;

} .mw-parser-output h2:before {

   margin-right: 6px;

}

 .DrawTarget{padding:0.6em 1.6em 2.6em 1.6em}

span.ipet-Text {

   font-weight: bold;

} .input-entry .ipet-Change {

   margin: 0 5px;
   min-width: 80px;
   display: inline-block;
   border-radius: 50px;
   border-bottom: 1px solid #ccc;
   text-align:center;

}

 .BOX-4 {
 max-width: 800px;
   margin: auto;
 }
 p.gacha-lab {
   font-size: 90%;

}

   .gacha-0{
  width: 200px !important;
   margin: auto;
   display: block;
   height: 400px;
   position: relative;
   overflow: hidden;
 }
  .gacha-0 > a:first-child img{
     top: -60px;
   position: relative;
 }
 #outputLife1, #outputAtk1 {width:150px;}
 
 .gacha-type2 + div img { width: 32px!important;}

 .gacha-type2 + div + div {font-size:12px!important;right:12px!important;}

@media (max-width: 768px){ .Box-4{

 margin: 0 -15px;

} .DrawTarget ul{

 margin:0;

} .flex-row-min {

   display: flex;
   flex-direction: row;
   justify-content: center;
   gap:10px;

} .block-xs{display:block}

show-portrait-2{

 float: left;
 margin: 0px 20px 0px 20px;

}

show-portrait-2 img {

   width: 70px;

}

show-portrait-2 ~ .input-entry select{ width: 140px;}

.ProfileBox .input-entry .ipet-Change {

   min-width: 60px;
   margin-left: -6px;

}

 .DrawTarget{padding: 0.6em 0.6em 2.6em 0.6em}
 .StoneSelectBox .input-entry{height:auto;}
 .StoneSelectBox .input-entry > * {display:inline-block;width:100%;text-align:center;height:auto;}

}

 .popup > .popup-button {

cursor: pointer; } .popup > [id^="tippy"] { display: inline; } .popup > .popup-content { display: none; }

bili-tt-cache-block{

display: none; border:#000 solid 0px; } </style>