Module:GameInfo/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 142: / Line 142: @@
 .sv-skill-meta-block{
    margin:8px 0 10px;
+  display:grid;
+  grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr);
+  gap:10px;
+}
+.sv-skill-meta-block--single{
+  grid-template-columns:minmax(0, 1fr);
+}
+.sv-skill-meta-block__bubble{
+  min-width:0;
    padding:10px 12px;
    display:flex;
-   flex-direction:column;
+   align-items:center;
-  gap:8px;
    border-radius:16px;
@@ Line 154: / Line 165: @@
 }
-.sv-skill-meta-block .sv-skill-meta{
+.sv-skill-meta-block__bubble--meta .sv-skill-meta,
+.sv-skill-meta-block__bubble--req .sv-reqrow{
+  width:100%;
    margin:0;
 }
-.sv-gi-card .sv-skill-meta-block .sv-reqrow,
+.sv-skill-meta-block__bubble--req{
-.sv-skill-card .sv-skill-meta-block .sv-reqrow{
+   justify-content:center;
-   margin:0;
 }
@@ Line 275: / Line 287: @@
 .sv-gi-card .sv-reqrow,
 .sv-skill-card .sv-reqrow{
-   display:flex;
+   display:grid;
-   justify-content:center;
+   grid-template-columns:repeat(2, minmax(0, 1fr));
-  flex-wrap:wrap;
    gap:8px;
 }
@@ Line 283: / Line 294: @@
 .sv-gi-card .sv-disclose,
 .sv-skill-card .sv-disclose{
-   flex:0 1 190px;
+   min-width:0;
-   max-width:205px;
+   max-width:none;
 }
 .sv-gi-card .sv-reqrow .sv-disclose-btn,
 .sv-skill-card .sv-reqrow .sv-disclose-btn{
+  width:100%;
    min-height:36px;
    padding:0 12px;
@@ Line 296: / Line 308: @@
    box-shadow:none;
 }
+@media (max-width:700px){
+  .sv-skill-meta-block{
+    grid-template-columns:minmax(0, 1fr);
+  }
+}
 /* -------------------------------------------------------------------------- */