Widget:思念消耗计算器/css

<style> body { margin: 0; /* max-width: 1160px; */ background-color: grey; } @media (max-width: 768px) {

   #app {

margin: 0 -50;

   }

}

1. app {

position: relative; }

1. onload {

position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #7c798b; z-index: 9999; }

/* 加载动画 */ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading-spinner { border: 10px solid rgba(255, 255, 255, 0.3); /* 半透明边框 */ border-top: 10px solid #ffffff; /* 白色顶部边框 */ border-radius: 50%; width: 100px; height: 100px; animation: spin 1s linear infinite; /* 旋转动画 */ }

.title-img { z-index: 4; position: relative; margin-left: 20px; } .container-box { background: rgb(255, 255, 255); background: linear-gradient(150deg, rgba(255, 255, 255, 1) 0%, rgba(120, 120, 120, 0) 32%, rgba(255, 255, 255, 0.9) 100%); border-radius: 0 30px; position: relative; margin-bottom: 20px; width: 100%; } .neg-hi { top: -26px; } .need-box { border: 0; border-color: transparent; text-align: center; width: calc(100% - 60px); margin: 0 30px; font-weight: bold; } .need-box td { padding: 10px 6px; } .underline { border-bottom: 2px solid #3c3a46; } .filter-bg { position: relative; font-size: 16px; display: flex; justify-content: center; align-items: center; } .filter-bg:after { content: ""; height: 12px; width: 50px; position: absolute; background-color: pink; border-radius: 50%; filter: blur(10px); z-index: -1; margin-top: 16px; } .black-care { position: relative; padding: 10px 0; background-color: #00000033; border-radius: 20px; color: #fff; } .black-care .flex-row-c { white-space: nowrap; } .select-box.row { margin: 0; position: relative;

   background-color: #00000033;
   border-radius: 20px;
   color: #fff;

} .need-box select { background: #3c3a46; border-radius: 20px; padding: 10px 0; cursor: pointer; color: #fff;

   min-width: 100px;
   text-align: center;

} .select-more { height: 100%; padding: 10px 0; } .icon-box { width: 30px; display: inline-block; } .icon-box img { height: 30px; } .icon-box-min { width: 20px; display: inline-block; } .icon-box-min img { height: 20px; } .icon-box-max { width: 40px; display: inline-block; } .icon-box-max img { height: 40px; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input { border: 0; } input:focus { /* box-shadow: 0px 0px 5px 0px rgba(64, 159, 255, 0.25); */ border: none; /* outline: 2px solid #0d0c13; */ outline: none; } .input-short { width: 60px; color: #fff; background-color: #3c3a46; text-align: center; border-radius: 4px; } .role-box { border: 0; border-color: transparent; text-align: center; width: calc(100% - 40px); margin: 40px 20px 0 20px; font-weight: bold; } .role-input { border-radius: 14px; background-color: #3c3a46; margin: 0 10px; height: 30px; color: #fff; min-width: 80px; text-align: center; } .role-input.flex-row-c { justify-content: center; } .role-box td { padding: 6px; } .del-btn { cursor: pointer; position: absolute; right: 10px; bottom: 10px; } .flex-row { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; } .flex-row-c { display: flex; flex-direction: row; align-items: center; } .flex-row-cc { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; } .flex-col-c { display: flex; flex-direction: column; align-items: center; } .text-align-left {

 text-align: left;

} .cursor-pointer {

 cursor: pointer;

}

.add-btn-container {

 width: calc(100% - 20px);
 height: 50px;
 display: flex;
 margin: 20px 0 50px 0;

} .add-btn {

 background-color: #3c3a46;
 border-radius: 10px;
 cursor: pointer;

} .add-btn-container .add-btn {

 height: 100%;
 width: calc(50% - 40px);
 margin-right: 40px;
 display: flex;

} .add-btn-text {

 width: 75%;
 color: white;
 line-height: 50px;
 text-align: center;
 padding-left: 5px;

} @keyframes fadeIn {

 from {
   opacity: 0;
 }
 to {
   opacity: 1;
 }

}

.fade-in {

 animation: fadeIn 1s ease-in-out 1 forwards;

}

</style>