style(next): promoted attributes widget: improve appearance

This commit is contained in:
Adorian Doran 2025-02-22 10:10:58 +02:00
parent 8e69cf79a6
commit 7269c1b0aa
3 changed files with 20 additions and 6 deletions

View File

@ -144,6 +144,9 @@
--alert-bar-background: #6b6b6b3b;
--promoted-attribute-card-background-color: var(--card-background-color);
--promoted-attribute-card-shadow-color: #000000b3;
--right-pane-item-hover-background: #ffffff26;
--right-pane-item-hover-color: white;

View File

@ -138,6 +138,9 @@
--alert-bar-background: #32637b29;
--promoted-attribute-card-background-color: var(--card-background-color);
--promoted-attribute-card-shadow-color: #00000033;
--new-tab-button-background: #d8d8d8;
--new-tab-button-color: #3a3a3a;
--new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

View File

@ -1847,22 +1847,26 @@ div.promoted-attributes-container {
margin-right: 15%;
padding: 6px 0;
gap: 8px;
font-size: .85em;
align-items: stretch;
}
div.promoted-attributes-container,
div.promoted-attributes-container input {
font-size: .9rem;
}
/* A promoted attribute card */
div.promoted-attribute-cell {
--pa-card-padding-left: 16px;
--pa-card-padding-right: 4px;
--pa-card-padding-right: 2px;
--input-background-color: transparent;
box-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
box-shadow: 1px 1px 2px var(--promoted-attribute-card-shadow-color);
display: inline-flex;
margin: 0;
border-radius: 8px;
padding: 4px var(--pa-card-padding-right) 4px var(--pa-card-padding-left);
background: var(--card-background-color);
padding: 2px var(--pa-card-padding-right) 2px var(--pa-card-padding-left);
background: var(--promoted-attribute-card-background-color);
overflow-y: visible;
}
@ -1882,6 +1886,10 @@ div.promoted-attribute-cell label {
opacity: .75;
}
div.promoted-attribute-cell label::after {
content: ":";
}
div.promoted-attribute-cell div.input-group {
min-height: auto;
padding: 1px 6px;
@ -1906,7 +1914,7 @@ div.promoted-attribute-cell div:has(input[type="checkbox"]) {
/* The element containing the "new attribute" and "remove this attribute button" */
div.promoted-attribute-cell .multiplicity:has(span) {
--icon-button-size: 28px;
--icon-button-size: 24px;
margin-left: 8px;
margin-right: calc(var(--pa-card-padding-left) - var(--pa-card-padding-right));