✨ 新版状态页面

liteyuki/resources/vanilla_resource/templates/css/style.css

@@ -0,0 +1,101 @@
+body {
+    background-repeat: repeat-y;
+    background-size: cover;
+    background-position: center;
+    color: white;
+/ / 上10px，左右10px，下0px / / margin: 24 px;
+    margin: 20px;
+}
+
+.info-box {
+    border-radius: 30px;
+    padding: 30px;
+    backdrop-filter: blur(10px);
+    background-color: rgba(0, 0, 0, 0.3);
+    margin-bottom: 20px;
+}
+
+.pie-chart {
+    height: 240px;
+    width: 240px;
+    margin-bottom: 20px;
+}
+
+.pie-info {
+    margin: 0 40px;
+    align-items: center;
+}
+
+.bot-info {
+    align-items: center;
+    display: flex;
+}
+
+#hardware-info {
+    justify-content: center;
+    text-align: center;
+    display: flex;
+}
+
+#disks-info {
+    flex-wrap: wrap;
+    justify-content: center;
+
+}
+
+#motto-info {
+    margin-bottom: 0;
+    text-align: center;
+    white-space: pre-wrap;
+}
+
+.bot-icon {
+    border-radius: 50%;
+    height: 200px;
+    background-color: white;
+}
+
+.bot-name, .bot-tag {
+    margin-left: 20px;
+}
+
+.bot-name {
+    font-size: 42px;
+    font-weight: bold;
+}
+
+
+.bot-tag {
+    margin-top: 10px;
+}
+
+.chart-label {
+    font-size: 24px;
+    max-width: 240px;
+}
+
+.tag {
+    font-size: 32px;
+    font-weight: 700;
+    font-style: italic;
+}
+
+.tag[suffix="1"]::after {
+    content: " | ";
+    display: inline-block;
+    margin: 0 5px;
+    height: 50%;
+    line-height: 50%;
+    color: #ccc;
+}
+
+.motto-text {
+    font-size: 36px;
+    color: #fff;
+}
+
+.motto-author {
+    font-size: 30px;
+    font-style: italic;
+    color: #ccc;
+}