Spaces:
Running
Running
Commit
·
ec31c3e
1
Parent(s):
ead8de6
css fixes
Browse files- magentaRT_rt_tester.html +22 -2
magentaRT_rt_tester.html
CHANGED
|
@@ -32,14 +32,34 @@
|
|
| 32 |
.badge { padding: 2px 6px; border-radius: 999px; background: #2a2a3a; font-size: 12px; }
|
| 33 |
.sep { height: 1px; background: #212133; margin: 12px 0; }
|
| 34 |
|
| 35 |
-
.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 36 |
.style-row {
|
| 37 |
display: grid;
|
| 38 |
-
grid-template-columns: 1fr 140px 70px 32px; /* name | slider | number | X */
|
| 39 |
gap: 10px;
|
| 40 |
align-items: center;
|
| 41 |
}
|
|
|
|
|
|
|
| 42 |
.style-row .remove { padding: 6px 8px; line-height: 1; }
|
|
|
|
|
|
|
|
|
|
|
|
|
| 43 |
</style>
|
| 44 |
</head>
|
| 45 |
<body>
|
|
|
|
| 32 |
.badge { padding: 2px 6px; border-radius: 999px; background: #2a2a3a; font-size: 12px; }
|
| 33 |
.sep { height: 1px; background: #212133; margin: 12px 0; }
|
| 34 |
|
| 35 |
+
.row > [class^="col-"] { min-width: 0; }
|
| 36 |
+
|
| 37 |
+
@media (min-width: 901px) {
|
| 38 |
+
.row { column-gap: 24px; } /* more breathing room between L/R halves */
|
| 39 |
+
.col-6 { min-width: 0; overflow: hidden; } /* clip any tiny visual bleed */
|
| 40 |
+
}
|
| 41 |
+
|
| 42 |
+
/* prevent tiny default margins on sliders from poking into the gutter */
|
| 43 |
+
input[type="range"] { margin: 0; }
|
| 44 |
+
|
| 45 |
+
/* belt-and-suspenders: keep style rows from visually spilling */
|
| 46 |
+
.style-row { overflow: hidden; }
|
| 47 |
+
|
| 48 |
+
.style-list { display: flex; flex-direction: column; gap: 12px; }
|
| 49 |
+
|
| 50 |
.style-row {
|
| 51 |
display: grid;
|
| 52 |
+
grid-template-columns: minmax(0,1fr) 140px 70px 32px; /* name | slider | number | X */
|
| 53 |
gap: 10px;
|
| 54 |
align-items: center;
|
| 55 |
}
|
| 56 |
+
.style-row .style-name,
|
| 57 |
+
.style-row .style-range { min-width: 0; }
|
| 58 |
.style-row .remove { padding: 6px 8px; line-height: 1; }
|
| 59 |
+
@media (max-width: 900px) {
|
| 60 |
+
.row { grid-template-columns: 1fr; }
|
| 61 |
+
.col-6, .col-12, .col-4, .col-3, .col-2 { grid-column: 1 / -1; }
|
| 62 |
+
}
|
| 63 |
</style>
|
| 64 |
</head>
|
| 65 |
<body>
|