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

package/core/resources/html/lvsco/lvsco.css

@@ -0,0 +1,706 @@
+@import "../common/common.css";
+
+body {
+    width: 2400px;
+    height: 1080px;
+    color: #fff;
+    background: #000;
+}
+
+body p {
+    margin: 0;
+    color: #fff;
+}
+
+.full-box {
+    width: 2400px;
+    height: 1080px;
+}
+
+.demo {
+    opacity: 0;
+    width: 2400;
+    height: 1080;
+    position: absolute;
+    z-index: 0;
+    background-color: #000;
+}
+
+.left,
+.left-up {
+    transform: perspective(500px) rotateY(8deg);
+    z-index: 1;
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.left {
+    background-color: rgba(0, 191, 255, 0.2);
+    top: 62px;
+    left: 298px;
+    width: 394px;
+    height: 957px;
+}
+
+.left-up {
+    top: 54px;
+    left: 304px;
+    width: 399px;
+    height: 976px;
+    z-index: 2;
+}
+
+.left .left-top {
+    filter: brightness(0.5);
+    opacity: 0.5;
+}
+
+.left-top {
+    height: 24.5%;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    overflow: hidden;
+    flex-direction: column;
+}
+
+.illustration {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.illustration img {
+    height: 100%;
+}
+
+.user_info {
+    position: absolute;
+    display: flex;
+    top: 20px;
+    filter: drop-shadow(-4px 4px 0px #00000088);
+}
+
+.info_up {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+}
+
+.avatar {
+    width: 100px;
+    display: flex;
+    border: 5px solid;
+    border-color: grey;
+    height: min-content;
+    flex-direction: row;
+    align-items: center;
+    z-index: 2;
+}
+
+.avatar img {
+    width: 100%;
+}
+
+.basic_info,
+.user_info_right {
+    background-color: #000000aa;
+    margin: 0;
+    height: 80%;
+}
+
+.basic_info {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+    width: 250px;
+}
+
+.user_name {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    height: 45.6px;
+}
+
+.user_name p {
+    font-size: 30px;
+    line-height: 1;
+}
+
+.user_rks {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    width: 81%;
+    align-items: center;
+}
+
+.player_rks {
+    width: 90px;
+    height: 20px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    margin-left: -10px;
+    padding-left: 10px;
+    clip-path: polygon(100% 0%, 96% 100%, 0 100%, 0% 0%);
+    justify-content: center;
+}
+
+.player_rks p {
+    font-size: 17px;
+    color: #000;
+    margin-right: 15;
+}
+
+.Challenge {
+    width: 80px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    position: relative;
+}
+
+.Challenge p {
+    font-size: 25px;
+    text-shadow: 0 0 20px #ffffff;
+    margin-top: -45px;
+}
+
+.Challenge img {
+    width: 100%;
+    height: auto;
+    margin-right: 0;
+    margin-left: 0;
+    border-radius: 0px;
+    margin-bottom: -0px;
+}
+
+.user_info_right {
+    width: 20px;
+    clip-path: polygon(100% 0%, 0% 100%, 0% 0%);
+}
+
+.difficulty_box {
+    position: absolute;
+    display: flex;
+    width: 100%;
+    height: 100px;
+    background: linear-gradient(#00000000 0, #000000c7 100%);
+    top: 139px;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-end;
+}
+
+.difficulty_box_p p {
+    font-size: 20;
+}
+
+.difficulty_bar-in,
+.difficulty_bar-out {
+    height: 3px;
+}
+
+.difficulty_bar-out {
+    width: 100%;
+    background-color: #ffffff80;
+}
+
+.difficulty_bar-in {
+    margin-left: 5%;
+    width: 25%;
+    background-color: #ffffff;
+}
+
+.difficulty_value {
+    width: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 20%;
+    justify-content: center;
+}
+
+.difficulty_value p {
+    font-size: 20px;
+}
+
+.left-content {
+    width: 100%;
+    height: 3%;
+    display: flex;
+    margin-top: 17px;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-end;
+}
+
+.left-content-left,
+.left-content-right {
+    background-color: rgba(255, 255, 255, 0.5);
+}
+
+.left-content-left {
+    width: 31.2%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.left-content-left p {
+    font-size: 20px;
+    color: #002633;
+}
+
+.left-content-right {
+    width: 62.7%;
+    height: 3px;
+}
+
+
+.left-mid {
+    width: 93.9%;
+    height: 49.3%;
+    margin-top: 4.4%;
+}
+
+.left-mid-box,
+.left-mid-box-false,
+.left-mid-box-true,
+.left-up-mid-box-false,
+.left-up-mid-box-true {
+    width: 100%;
+    height: 24%;
+    margin-bottom: 1.3%;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+}
+
+.left-up-mid-box-true {
+    margin-top: 1.5%;
+    background: rgba(255, 255, 255, 0.7);
+    transform: rotateY(7deg);
+    margin-left: -0.5%;
+}
+
+.left-up-mid-box-false {
+    background-color: rgb(0 191 255 / 17%);
+    margin-left: -1.18%;
+    margin-top: 0.5%;
+    margin-bottom: 1%;
+    transform: rotateY(8deg);
+}
+
+.left-mid-box-false {
+    background-color: rgba(0, 191, 255, 0.1);
+}
+
+.left-mid-box-true {
+    background-color: rgba(255, 255, 255, 0.3);
+}
+
+.left-up-mid-box-true p {
+    color: #002633;
+}
+
+.left-mid-box-true p,
+.left-mid-box-false p {
+    color: #8f8f8f33;
+}
+
+.rank-left {
+    width: 40%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.rank-left p {
+    font-size: 70px;
+}
+
+.rank-right {
+    width: 57%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: center;
+}
+
+.rank-right p {
+    font-size: 30px;
+}
+
+
+
+.left-mid-bottom,
+.left-up-mid-bottom {
+    width: 93.9%;
+    height: 5px;
+    background: rgba(255, 255, 255, 0.2);
+    margin-top: 4px;
+}
+
+.left-up-mid-bottom {
+    margin-left: -1.18%;
+    margin-top: 0%;
+    margin-bottom: 1%;
+    transform: rotateY(8deg);
+}
+
+
+.right {
+    position: absolute;
+    display: flex;
+    width: 1390px;
+    height: 939px;
+    top: 70px;
+    left: 708px;
+    transform: perspective(500px) rotateY(-1.5deg);
+    flex-direction: column;
+    align-items: center;
+    z-index: 0;
+    background: linear-gradient(#00bfff33 90%, #00bfff00 100%);
+}
+
+.file-content {
+    /* background-color: rgba(0, 191, 255, 0.1); */
+    width: 101.3%;
+    height: 3.5%;
+    display: flex;
+    margin-top: -0.4%;
+    z-index: 1;
+    filter: drop-shadow(8px 7px 0px #ababab33);
+}
+
+.file-content-left {
+    background-color: rgba(0, 191, 255, 1);
+    width: 10%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-right: 1%;
+    clip-path: polygon(92% 0%, 100% 50%, 92% 100%, 0 100%, 0% 0%);
+}
+
+.file-content-left p {
+    font-size: 22px;
+    color: #fff;
+    transform: scaleX(0.78);
+}
+
+.progress_bar-out {
+    background-color: rgba(0, 191, 255, 0.1);
+    width: 90%;
+    margin-left: -1%;
+    padding-left: 1%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+}
+
+.progress_bar-in-phi {
+    display: flex;
+    width: 100%;
+    margin-left: -1%;
+    padding-left: 1%;
+    border-right: 3.5px solid;
+    border-color: #fff;
+    background: repeating-linear-gradient(-45deg, rgba(170, 164, 85, 0.5), rgba(170, 164, 85, 0.5) 1.5px, rgba(170, 164, 85, 0.75) 0, rgba(170, 164, 85, 0.75) 6px);
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.progress_bar-in-fc {
+    display: flex;
+    width: 0%;
+    border-right: 3.5px solid;
+    border-color: #fff;
+    background: repeating-linear-gradient(-45deg, rgba(85, 136, 170, 0.5), rgba(85, 136, 170, 0.5) 1.5px, rgba(85, 136, 170, 0.75) 0, rgba(85, 136, 170, 0.75) 6px);
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.progress_bar-in-fc p,
+.progress_bar-in-phi p {
+    color: #fff;
+    font-size: 20px;
+    margin-left: 0.5%;
+    white-space: nowrap;
+    z-index: 2;
+    text-align: right;
+    width: 99%;
+}
+
+.progress_bar-in-fc p {
+    margin-top: -60px;
+}
+
+.right_title {
+    width: 95%;
+    height: 15%;
+    display: flex;
+    align-items: flex-end;
+    flex-direction: row;
+    filter: drop-shadow(4px 4px 0px #ababab33);
+}
+
+.right_title p {
+    font-size: 110px;
+    color: #fff;
+}
+
+.title_group {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    flex-direction: row;
+    margin-left: 5%;
+}
+
+
+.title_group-real {
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.title_group-real p {
+    font-size: 70px;
+    color: white;
+}
+
+.title_group-tot {
+    height: 100%;
+    display: flex;
+    align-items: flex-end;
+}
+
+.title_group-tot p {
+    font-size: 30px;
+    color: #d5d5d5;
+}
+
+#FC {
+    background: linear-gradient(#00537654 50%, #00b4ff54 100%);
+}
+
+#phi {
+    background: linear-gradient(#534e0054 50%, #f8ff0054 100%);
+}
+
+.right_content {
+    width: 95%;
+    height: 3.8%;
+    border-bottom: 3px solid #fff;
+    display: flex;
+    filter: drop-shadow(4px 4px 0px #ababab33);
+}
+
+.right_content p {
+    color: #fff;
+    font-size: 26px;
+    margin-left: 15px;
+    margin-right: 15px;
+}
+
+.right_content-title {
+    background-color: #fff;
+    height: 100%;
+}
+
+.right_content-title p {
+    color: #000;
+}
+
+.tot_Rating {
+    position: absolute;
+    display: flex;
+    height: 300px;
+    justify-content: center;
+    align-items: center;
+    top: 250px;
+    left: 40px;
+}
+
+.tot_Rating img {
+    height: 100%;
+}
+
+#score {
+    margin: 0;
+    position: absolute;
+    top: 240px;
+    left: 400px;
+}
+
+#real-score p {
+    font-size: 100px;
+}
+
+#tot-score p {
+    font-size: 45px;
+}
+
+.tot_acc-box {
+    margin: 0;
+    position: absolute;
+    width: 800px;
+    top: 500px;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.tot_acc-left {
+    font-size: 200px;
+}
+
+.tot_acc-right {
+    display: flex;
+    font-size: 100px;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+}
+
+#acc_word {
+    color: #d5d5d5;
+    font-size: 45px;
+}
+
+
+#highest {
+    margin: 0;
+    position: absolute;
+    top: 400px;
+    left: 350px;
+}
+
+#lowest {
+    margin: 0;
+    position: absolute;
+    top: 400px;
+    left: 900px;
+}
+
+#real-highlow p {
+    font-size: 70px;
+}
+
+#tot-highlow p {
+    font-size: 35px;
+}
+
+.stats-rating-group {
+    display: flex;
+    width: 500px;
+    height: 100px;
+    left: 100px;
+    top: 800px;
+    align-items: center;
+    justify-content: space-around;
+    position: absolute;
+}
+
+.rating-group {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.rating-value {
+    display: flex;
+    height: 60%;
+    align-items: center;
+    justify-content: center;
+}
+
+.rating-value p {
+    font-size: 75px;
+}
+
+.rating-tatle {
+    display: flex;
+    height: 30%;
+    align-items: center;
+    justify-content: center;
+}
+
+.rating-tatle p {
+    font-size: 30px;
+    color: #ababab;
+}
+
+.rating_stats {
+    display: flex;
+    position: absolute;
+    top: 520px;
+    right: 20px;
+    align-items: flex-end;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    width: 593px;
+    height: 330px;
+    border-left: 3px solid;
+    border-bottom: 3px solid;
+    justify-content: space-evenly;
+}
+
+.rating_stats_group {
+    display: flex;
+    align-items: center;
+    width: 50px;
+    height: 100%;
+    /* margin-left: 20px; */
+    justify-content: flex-end;
+    flex-direction: column;
+}
+
+.rating_stats_group img {
+    height: 50px;
+    position: absolute;
+    bottom: -55px;
+}
+
+.rating_stats_group p {
+    font-size: 30px;
+    margin-top: -100%;
+}
+
+.rating_stats_bar {
+    width: 100%;
+    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 6px, rgba(255, 255, 255, 0.75) 0, rgba(255, 255, 255, 0.75) 12px);
+}
+
+.createdbox {
+    margin-top: 70px;
+}
+
+.phi-plugin p {
+    font-size: 40px;
+}
+
+.ver p {
+    font-size: 20px;
+}