|
|
@@ -1,5 +1,34 @@
|
|
|
:host { --control-height: 42px; }
|
|
|
|
|
|
+.page-header {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: minmax(0, 1fr) auto;
|
|
|
+ align-items: start;
|
|
|
+ gap: 16px 24px;
|
|
|
+ margin-bottom: 18px;
|
|
|
+}
|
|
|
+.page-header > div:first-child { min-width: 0; }
|
|
|
+.page-header p { margin: 0 0 8px; }
|
|
|
+.page-header h1 { margin: 0 0 8px; }
|
|
|
+.page-header > div > span { display: block; }
|
|
|
+.page-header .header-actions {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 8px;
|
|
|
+ padding-top: 22px;
|
|
|
+}
|
|
|
+.header-actions .ui-button { min-height: 40px; padding: 9px 14px; }
|
|
|
+
|
|
|
+.toolbar {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: minmax(320px, 2fr) minmax(180px, .55fr) minmax(96px, auto) minmax(96px, auto);
|
|
|
+ align-items: end;
|
|
|
+}
|
|
|
+.toolbar .grow { min-width: 0; }
|
|
|
+.toolbar label:not(.grow) { min-width: 180px; }
|
|
|
+.toolbar > .ui-button { width: 100%; }
|
|
|
+
|
|
|
.summary-grid {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
|
@@ -37,7 +66,17 @@
|
|
|
.read-only { color: #71817b; font-size: 12px; }
|
|
|
|
|
|
@media (max-width: 1180px) { .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
|
|
|
+@media (max-width: 1000px) {
|
|
|
+ .toolbar { grid-template-columns: minmax(220px, 1fr) minmax(160px, .55fr) auto auto; }
|
|
|
+ .toolbar .grow { min-width: 0; }
|
|
|
+ .toolbar label:not(.grow) { min-width: 160px; }
|
|
|
+}
|
|
|
@media (max-width: 700px) {
|
|
|
+ .page-header { grid-template-columns: 1fr; gap: 12px; }
|
|
|
+ .page-header .header-actions { padding-top: 0; }
|
|
|
+ .toolbar { grid-template-columns: minmax(0, 1fr) auto auto; }
|
|
|
+ .toolbar .grow { grid-column: 1 / -1; }
|
|
|
+ .toolbar label:not(.grow) { min-width: 0; }
|
|
|
.summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
|
|
.summary-grid article { padding: 15px; border-radius: 14px; }
|
|
|
.summary-grid article:first-child { grid-column: 1 / -1; }
|
|
|
@@ -46,3 +85,8 @@
|
|
|
.store-editor footer .ui-button { flex: 1 1 auto; }
|
|
|
.store-editor footer .push-left { flex-basis: 100%; margin-right: 0; }
|
|
|
}
|
|
|
+
|
|
|
+@media (max-width: 460px) {
|
|
|
+ .toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
|
+ .toolbar label:not(.grow) { grid-column: 1 / -1; }
|
|
|
+}
|