@lf_maple/koishi-plugin-phi-plugin-full 0.1.80

package/core/resources/html/atlas/atlas.css

@@ -0,0 +1,695 @@
+@import "../common/common.css";
+@import "../common/snow.css";
+
+:root {
+    --rankHight: 80px;
+    --clipSlope:0.25;
+}
+
+body {
+    width: 2048px;
+    min-height: 1100px;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.background {
+    min-height: 100%;
+    min-width: 2048px;
+}
+
+.big-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 972px;
+    position: relative;
+}
+
+.box {
+    display: flex;
+    margin-top: 120px;
+    width: 1736px;
+    justify-content: center;
+    align-items: flex-start;
+    z-index: 1;
+    margin-left: 120px;
+}
+
+.box p {
+    margin: 0;
+    flex-direction: column;
+}
+
+.info-box {
+    width: 700px;
+    margin-top: 30px;
+    height: auto;
+    z-index: 1;
+}
+
+.name-box {
+    display: flex;
+    --height: 144px;
+    width: 833px;
+    background-color: rgba(0, 0, 0, 0.75);
+    margin-left: 200px;
+    /*clip-path: polygon(36px 0px, 100% 0%, 100% 100%, 0% 100%, 36px 0px);*/
+    flex-direction: column;
+    z-index: 1;
+    backdrop-filter: blur(3px);
+}
+
+.name-box .song {
+    height: 72px;
+    width: 563px;
+    margin-left: 51px;
+    margin-top: 13px;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.name-box .song p {
+    color: rgb(255, 255, 255, 0.93);
+    font-size: 48px;
+}
+
+.name-box .composer {
+    height: 50px;
+    width: 547px;
+    margin-left: 49px;
+}
+
+.name-box .composer p {
+    color: rgb(255, 255, 255, 0.83);
+    font-size: 25px;
+}
+
+.charts-box {
+    height: 600px;
+    width: 1500px;
+    transform: skewX(-0.245rad);
+    background-color: rgba(0, 77, 100, 0.555);
+    border-left: 12px solid;
+    border-color: rgb(0, 183, 240);
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    backdrop-filter: blur(3px);
+    z-index: 1;
+}
+
+.charts-box p {
+    font-size: 20px;
+    z-index: 1;
+    text-shadow: 0 0 2px black;
+    transform: skewX(0.245rad);
+}
+
+.charts-box .length {
+    margin-left: 20px;
+    height: 64px;
+    width: 155px;
+}
+
+.charts-box .length p {
+    color: white;
+    font-size: 30px;
+    margin-top: 10px;
+}
+
+.charts-box .txt {
+    height: 32px;
+    display: flex;
+    margin-left: 20px;
+    align-items: flex-end;
+}
+
+.charts-box .txt .sqrt {
+    height: 32px;
+    width: 154px;
+    display: flex;
+    background-color: rgba(209, 209, 209, 0.75);
+    justify-content: center;
+    align-items: center;
+}
+
+.charts-box .txt .sqrt p {
+    color: #000;
+    font-size: 20px;
+}
+
+.charts-box .txt .line {
+    height: 80px;
+    width: 567px;
+    display: flex;
+    border-bottom: 2px solid;
+    border-color: rgba(209, 209, 209, 0.75);
+    align-items: flex-end;
+    font-size: 200;
+}
+
+.charts-box .txt .line p {
+    color: #ffffff;
+    font-size: 20px;
+    padding-left: 10px;
+    padding-right: 10px;
+    text-align: center;
+    width: 95%;
+}
+
+.charts-box .common {
+    margin-left: 20px;
+    width: 590px;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.charts-box .common p {
+    color: white;
+}
+
+.chart {
+    margin-left: 19px;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.chart p {
+    color: white;
+}
+
+.rankbkg {
+    width: 45%;
+    position: absolute;
+    z-index: 0;
+}
+
+.sqr {
+    width: 100%;
+    height: var(--rankHight);
+}
+
+.rank-EZ {
+   background: linear-gradient(90deg,
+    #92d050 95px,
+    #00000000 95px,
+    #92d05088 105px,
+    #92d05088 50%,
+    #00000000 100%
+  );
+}
+
+.rank-HD {
+    background: linear-gradient(90deg,
+    #00b0f0 95px,
+    #00000000 95px,
+    #00b0f088 105px,
+    #00b0f088 50%,
+    #00000000 100%
+  );
+}
+
+.rank-IN {
+    background: linear-gradient(90deg,
+    #ff0000 95px,
+    #00000000 95px,
+    #ff000088 105px,
+    #ff000088 50%,
+    #00000000 100%
+  );
+}
+
+.rank-AT {
+    background: linear-gradient(90deg,
+    #6e6e6e 95px,
+    #00000000 95px,
+    #6e6e6e88 105px,
+    #6e6e6e88 50%,
+    #00000000 100%
+  );
+}
+
+.rank {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-left: 5px;
+    width: 85px;
+}
+
+.rank p {
+    font-size: 30px;
+    text-align: center;
+    height: calc(var(--rankHight)/2);
+    justify-content: center;
+    margin-top: -2px;
+    margin-bottom: 2px;
+}
+
+.rank .pBox {
+    height: var(--rankHight);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+}
+
+.rank-box {
+    display: flex;
+    flex-direction: column;
+    width: 470px;
+    margin-left: 5px;
+}
+
+.rank-box p {
+    font-weight: bold;
+}
+
+.charter {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: calc(var(--rankHight)/2);
+    width: 100%;
+    justify-content: center;
+}
+
+.chart-info {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+    height: calc(var(--rankHight)/2);
+    align-items: center;
+}
+
+.chart-info :nth-child(1) {
+    color: var(--tap);
+    font-size: 25px;
+}
+
+.chart-info :nth-child(2) {
+    color: var(--drag);
+    font-size: 25px;
+}
+
+.chart-info :nth-child(3) {
+    color: var(--hold);
+    font-size: 25px;
+}
+
+.chart-info :nth-child(4) {
+    color: var(--flick);
+    font-size: 25px;
+}
+
+.note-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-left: 5px;
+}
+
+.note-box p {
+    font-size: 30px;
+    height: var(--rankHight);
+    display: flex;
+    justify-content: center;
+}
+
+.ill-box {
+    display: flex;
+    width: 1024px;
+    --height: 540px;
+    filter: drop-shadow(0px 0px 30px #000);
+    justify-content: center;
+    align-items: center;
+    z-index: 2;
+    overflow: hidden;
+    position: relative; /* 新增，为内部绝对定位提供参考 */
+}
+.original-tag {
+    position: absolute;
+    bottom: 290px;
+    right: 100px;
+    width: 200px;
+    height: 50px;
+    background-color: white;
+    color: black;
+    display: flex;
+    font-size: 22px;
+    font-weight: normal;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    line-height: 1.2;
+    padding: 0 5px;
+    box-sizing: border-box;
+    /* 多边形裁剪：使左边线与曲绘左下角斜边平行 */
+    transform: skewX(-0.245rad);
+    filter: drop-shadow(2px 4px 5px #0000004f);
+    z-index: 3;
+    
+}
+
+.original-tag p {
+    transform: skewX(0.245rad);
+}
+
+.ill-box img {
+    width: 100%;
+    /*clip-path: polygon(
+        139px 0px,
+        1063px 0px,
+        924px 560px,
+        0px 560px,
+        139px 0px
+    );*/
+    z-index: 2;
+}
+
+.other-info {
+    display: flex;
+    position: absolute;
+    left: 794px;
+    bottom: 100px;
+    flex-direction: column;
+    z-index: 2;
+    transform: skewX(-0.245rad);
+}
+
+.other-box .title {
+    background-color: rgba(0, 0, 0, 0.75);
+    width: 160px;
+    justify-content:center ;
+    display: flex;
+}
+
+.other-box .title p {
+    color: rgb(255, 255, 255);
+}
+
+.other-box .dcr {
+    margin-left: 15px;
+}
+
+.other-info p {
+    color: white;
+    font-size: 25px;
+    margin: 0;
+    text-shadow: 0 0 3px black;
+    text-align: right;
+    transform: skewX(0.245rad);
+}
+
+.other-box {
+    display: flex;
+    position: relative;
+    flex-direction: row;
+    margin-left: 50px;
+    align-items: flex-end;
+    margin: 10px 0px 10px 0px;
+}
+
+.leave {
+    margin-top: 40px;
+    width: 100%;
+    display: flex;
+}
+
+.leave-box {
+    z-index: 4;
+    display: flex;
+    filter: drop-shadow(0px 0px 30px #000);
+    margin-left: 37%;
+}
+
+.leave-box p {
+    color: white;
+    font-size: 30px;
+    margin: 0;
+    white-space: nowrap;
+    /* line-height: 35px; */
+}
+
+.leave-ez,
+.leave-hd,
+.leave-in,
+.leave-at,
+.leave-sp {
+    display: flex;
+    width: 100px;
+    height: 75px;
+    clip-path: polygon(17% 0px, 100% 0px, 83% 100%, 0px 100%, 17% 0px);
+    justify-content: space-evenly;
+    align-items: center;
+    flex-direction: column;
+    margin-right: 20px;
+}
+
+.leave-ez {
+    background-color: #92d050;
+}
+
+.leave-hd {
+    background-color: #00b0f0;
+}
+
+.leave-in {
+    background-color: #ff0000;
+}
+
+.leave-at {
+    background-color: #a6a6a6;
+}
+
+.leave-sp {
+    background-color: #000000;
+}
+
+.ldif,
+.lrank {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 50%;
+    width: 73%;
+    z-index: 1;
+    justify-content: center;
+    margin-bottom: -12px;
+}
+
+.ldif {
+    margin-left: 8px;
+    height: 60%;
+}
+
+.lrank {
+    margin-right: 9px;
+}
+
+.lrank p {
+    font-size: 15px;
+    text-shadow: 0 0 1px BLACK;
+}
+
+.comment-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 84.8%;
+    margin: 100px;
+    /* margin-bottom: 200px; */
+}
+
+.comment_title {
+    width: 100%;
+    border-bottom: gray 5px solid;
+    display: flex;
+}
+
+.comment_title p {
+    font-size: 25px;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.comment_title p:nth-child(1) {
+    background-color: gray;
+    color: white;
+}
+
+.comment_title p:nth-child(2) {
+    color: #000;
+    text-shadow: 2px 2px 4px #fff;
+}
+
+.a_comment {
+    width: 100%;
+    position: relative;
+    display: flex;
+    margin: 15px 0px;
+}
+
+.avatar {
+    position: absolute;
+    width: 8%;
+    z-index: 1;
+    border-bottom: 7px solid;
+    border-color: rgb(0, 183, 240);
+}
+
+.avatar img {
+    height: 175px;
+    --offset: 33px;
+    clip-path: polygon(
+        var(--offset) var(--H),
+        100% var(--H),
+        calc(100% - var(--offset)) calc(100% - var(--H)),
+        0 calc(100% - var(--H))
+    );
+    --H: 20px;
+    margin-bottom: calc(-1.3 * var(--H));
+}
+
+.userInfo {
+    position: absolute;
+    width: 90%;
+    left: 9.4%;
+    top: 20px;
+    display: flex;
+}
+
+.userInfo > * {
+    padding: 0px 14px;
+    margin: 0px -7px;
+    --offset: 13px;
+    clip-path: polygon(
+        var(--offset) 0,
+        100% 0,
+        calc(100% - var(--offset)) 100%,
+        0 100%
+    );
+}
+
+.userInfo p {
+    font-size: 30px;
+    white-space: nowrap;
+}
+
+.playerId {
+    background-color: #000000;
+}
+
+.playerId p {
+    color: #fff;
+}
+
+.rks {
+    background-color: #fff;
+}
+
+.rks p {
+    color: #000;
+}
+
+.score p,
+.acc p {
+    color: #fff;
+    text-shadow: 1px 1px 2px #000;
+}
+
+.spInfo p {
+    color: #000;
+}
+
+.clg_box {
+    width: 60px;
+    position: relative;
+}
+
+.Challenge {
+    width: 100%;
+    position: absolute;
+    left: 0px;
+    top: 4px;
+}
+
+.time p {
+    color: white;
+    text-shadow: 1px 1px 2px black;
+}
+
+.comment {
+    margin: 65px 0 0 7.7%;
+    width: 90%;
+    background-color: rgba(0, 183, 240, 0.3);
+    border-left: 7px solid;
+    border-right: 7px solid;
+    border-bottom: 7px solid;
+    border-color: rgb(0, 183, 240);
+    padding-left: 32px;
+    max-height: 340px;
+    min-height: 90px;
+}
+
+.comment p {
+    font-size: 32px;
+    color: white;
+}
+
+.createdbox {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    margin-top: -50px;
+    writing-mode: horizontal-tb;
+    justify-content: center;
+    position: absolute;
+    bottom: 120px;
+}
+
+.createdbox p {
+    color: white;
+    font-size: 70px;
+    font-family: "Aldrich", "PHI";
+    margin: 0;
+}
+
+.phi-plugin {
+    display: flex;
+    z-index: 1;
+    justify-content: center;
+    align-items: center;
+}
+
+.ver {
+    display: flex;
+    z-index: 1;
+}
+
+.phi-plugin p {
+    font-size: 40px;
+    text-shadow: 0 0 20px rgb(0 186 255);
+}
+
+.ver p {
+    font-size: 20px;
+    text-shadow: 0 0 20px #fff700;
+}
+
+.copyright {
+    margin-top: 4%;
+}