MediaWiki:Common.css: различия между версиями

← Предыдущая правка Следующая правка →

@@ Строка 435: / Строка 435: @@
 }
-.test {
-  .bluemoon-bg {
-    background-image: linear-gradient(to bottom right, rgba(30, 109, 129, 0.45), rgba(33, 141, 200, 0.45));
-  }
-   .whitemoon-bg {
-    background-image: linear-gradient(to bottom right, rgba(58, 63, 70, 0.45), rgba(150, 150, 150, 0.45));
+.bluemoon-bg {
+   background-image: linear-gradient(to bottom right, rgba(30, 109, 129, 0.45), rgba(33, 141, 200, 0.45));
+}
+.whitemoon-bg {
+  background-image: linear-gradient(to bottom right, rgba(58, 63, 70, 0.45), rgba(150, 150, 150, 0.45));
+}
+.redmoon-bg {
+  background-image: linear-gradient(to bottom right, rgba(97, 32, 31, 0.45), rgba(200, 35, 33, 0.45));
+}
+.test-main-panel {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  .border>div,
+  >div {
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 10px;
+    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    }
-   .redmoon-bg {
+   .title {
-     background-image: linear-gradient(to bottom right, rgba(97, 32, 31, 0.45), rgba(200, 35, 33, 0.45));
+     background-color: rgba(225, 216, 255, 0.2);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 5px;
+    font-size: 1.1em;
+    font-weight: bold;
    }
-   .main-panel {
+   .item {
+    flex: 1 1 calc(50% - 10px);
      display: flex;
-     flex-wrap: wrap;
+     flex-direction: column;
-     gap: 10px;
+     box-sizing: border-box;
+    background: rgba(2, 23, 26, 0.5);
+    overflow: hidden;
+    backdrop-filter: blur(10px);
-     .border > div, > div {
+     >.title {
-       border: 1px solid rgba(255, 255, 255, 0.15);
+       flex: 0 0 auto;
-      border-radius: 10px;
+       text-align: center;
-       box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
      }
-     .title {
+     >div:not(.title) {
-       background-color: rgba(255, 255, 255, 0.3);
+       flex: 1 1 auto;
-       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+       min-height: 0;
-       padding: 5px;
+       padding: 10px;
-      font-size: 1.1em;
-      font-weight: bold;
      }
+  }
-    .item {
+  .server-panel {
-      flex: 1 1 calc(50% - 10px);
+    display: flex;
-      display: flex;
+    flex-wrap: wrap;
-      flex-direction: column;
+    gap: 10px;
-      box-sizing: border-box;
-       background: rgba(2, 23, 26, 0.5);
+    .server {
+       flex: 1 1 100%;
        overflow: hidden;
-      backdrop-filter: blur(10px);
-       > .title {
+       .title {
-         flex: 0 0 auto;
+         background-color: rgba(255, 255, 255, 0.1);
-         text-align: center;
+        padding-left: 10px;
+         border-bottom: none;
        }
-       > div:not(.title) {
+       .desc {
-        flex: 1 1 auto;
-        min-height: 0;
          padding: 10px;
+        padding-bottom: 5px;
        }
-    }
-    .server-panel {
+      .links {
-      display: flex;
+        display: flex;
-      flex-wrap: wrap;
+        flex-wrap: nowrap;
-      gap: 10px;
+         justify-content: space-between;
-      .server {
-         flex: 1 1 100%;
-        overflow: hidden;
-         .title {
+         .link {
-           background-color: rgba(255, 255, 255, 0.1);
+           flex: 1;
-           padding-left: 10px;
+           padding: 5px;
-          border-bottom: none;
+           margin: 5px;
-        }
+          text-align: center;
-        .desc {
-          padding: 10px;
-          padding-bottom: 5px;
-        }
-        .links {
-          display: flex;
-          flex-wrap: nowrap;
-          justify-content: space-between;
-           .link {
-            flex: 1;
-            padding: 5px;
-            margin: 5px;
-            text-align: center;
-          }
          }
        }
      }
+  }
-    .button-panel {
+  .button-panel {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    .row {
+      flex: 1 1 100%;
        display: flex;
-      align-items: center;
        flex-wrap: wrap;
+      align-items: last baseline;
+      justify-content: space-between;
-       .row {
+       .button {
-         flex: 1 1 100%;
+         flex: 1 1 calc(33% - 10px);
          display: flex;
-         flex-wrap: wrap;
+         flex-direction: column;
-         align-items: last baseline;
+        box-sizing: border-box;
-         justify-content: space-between;
+         align-self: stretch;
+        overflow: hidden;
+         margin: 5px;
-         .button {
+         >div {
-           flex: 1 1 calc(33% - 10px);
+           text-align: center;
-          display: flex;
+           padding: 5px;
-          flex-direction: column;
+        }
-          box-sizing: border-box;
-          align-self: stretch;
-           overflow: hidden;
-          margin: 5px;
-          > div {
+        .title {
-            text-align: center;
+           font-weight: normal;
-            padding: 5px;
+           font-size: 1em;
-           }
+         }
-          .content {
-            background-color: rgba(2, 23, 26);
-            flex: 0 0 auto;
-           }
-          .title {
-            flex: 1 1 auto;
-            font-size: 1em;
-          }
-         }
        }
      }
    }
+}
-  @media (max-width: 600px) {
+@media (max-width: 600px) {
-    .main-panel .item {
+  .main-panel .item {
-      flex: 1 1 100% !important;
+    flex: 1 1 100% !important;
-    }
+  }
-    .main-panel .button {
+  .main-panel .button {
-      flex: 1 1 100% !important;
+    flex: 1 1 100% !important;
-    }
    }
 }