@patchbayhq/ui 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/styles.css +45 -1
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -1102,6 +1102,11 @@
|
|
|
1102
1102
|
background: transparent;
|
|
1103
1103
|
}
|
|
1104
1104
|
|
|
1105
|
+
.meter[data-orientation="horizontal"] {
|
|
1106
|
+
inline-size: 132px;
|
|
1107
|
+
block-size: 44px;
|
|
1108
|
+
}
|
|
1109
|
+
|
|
1105
1110
|
.meter__bar {
|
|
1106
1111
|
position: relative;
|
|
1107
1112
|
display: block;
|
|
@@ -1115,6 +1120,11 @@
|
|
|
1115
1120
|
inset 0 1px #2b2b2b;
|
|
1116
1121
|
}
|
|
1117
1122
|
|
|
1123
|
+
.meter[data-orientation="horizontal"] .meter__bar {
|
|
1124
|
+
inline-size: 132px;
|
|
1125
|
+
block-size: 44px;
|
|
1126
|
+
}
|
|
1127
|
+
|
|
1118
1128
|
.meter__bar::before {
|
|
1119
1129
|
content: "";
|
|
1120
1130
|
position: absolute;
|
|
@@ -1129,6 +1139,19 @@
|
|
|
1129
1139
|
);
|
|
1130
1140
|
}
|
|
1131
1141
|
|
|
1142
|
+
.meter[data-orientation="horizontal"] .meter__bar::before {
|
|
1143
|
+
inset-block: 3px;
|
|
1144
|
+
inset-inline-start: 0;
|
|
1145
|
+
inline-size: calc(100% * var(--meter-value, 0));
|
|
1146
|
+
block-size: auto;
|
|
1147
|
+
background: linear-gradient(
|
|
1148
|
+
to right,
|
|
1149
|
+
#45b95c 0 72%,
|
|
1150
|
+
#d7c947 72% 90%,
|
|
1151
|
+
#d45145 90%
|
|
1152
|
+
);
|
|
1153
|
+
}
|
|
1154
|
+
|
|
1132
1155
|
.meter__bar::after {
|
|
1133
1156
|
content: "";
|
|
1134
1157
|
position: absolute;
|
|
@@ -1138,6 +1161,23 @@
|
|
|
1138
1161
|
background: #333333;
|
|
1139
1162
|
}
|
|
1140
1163
|
|
|
1164
|
+
.meter__peak {
|
|
1165
|
+
position: absolute;
|
|
1166
|
+
inset-inline: 1px;
|
|
1167
|
+
inset-block-end: calc((100% - 1px) * var(--meter-peak, var(--meter-value, 0)));
|
|
1168
|
+
block-size: 1px;
|
|
1169
|
+
background: #ece7d8;
|
|
1170
|
+
box-shadow: 0 0 4px rgba(236, 231, 216, 0.35);
|
|
1171
|
+
pointer-events: none;
|
|
1172
|
+
}
|
|
1173
|
+
|
|
1174
|
+
.meter[data-orientation="horizontal"] .meter__peak {
|
|
1175
|
+
inset-block: 1px;
|
|
1176
|
+
inset-inline-start: calc((100% - 1px) * var(--meter-peak, var(--meter-value, 0)));
|
|
1177
|
+
inline-size: 1px;
|
|
1178
|
+
block-size: auto;
|
|
1179
|
+
}
|
|
1180
|
+
|
|
1141
1181
|
.gain {
|
|
1142
1182
|
--gain-value: 0.75;
|
|
1143
1183
|
--gain-signal: 0;
|
|
@@ -1422,9 +1462,13 @@
|
|
|
1422
1462
|
|
|
1423
1463
|
.macro-rack {
|
|
1424
1464
|
--macro-rack-columns: 4;
|
|
1465
|
+
--macro-rack-control-min: 64px;
|
|
1425
1466
|
container-type: inline-size;
|
|
1426
1467
|
display: grid;
|
|
1427
|
-
grid-template-columns: repeat(
|
|
1468
|
+
grid-template-columns: repeat(
|
|
1469
|
+
var(--macro-rack-columns),
|
|
1470
|
+
minmax(var(--macro-rack-control-min), 1fr)
|
|
1471
|
+
);
|
|
1428
1472
|
align-items: end;
|
|
1429
1473
|
gap: 12px clamp(4px, 3cqi, 10px);
|
|
1430
1474
|
min-inline-size: 0;
|