diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index 80573c4d6..4ad6a642a 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -189,10 +189,9 @@ } .cards:not(.is-collapsed) & { - display: grid; - grid-template-columns: auto 1fr auto; inline-size: 100%; margin-block-end: calc(-0.5 * var(--cards-gap)); + justify-content: center; &:hover, &:has(~ .cards__expander-menu:hover) { @@ -207,14 +206,13 @@ inline-size: var(--column-width-collapsed); .cards:not(.is-collapsed) & { - opacity: 0; + display: none; } } .cards__expander-title { font-weight: inherit; font-size: inherit; - grid-column: 2; line-height: var(--column-width-collapsed); .cards.is-collapsed & { @@ -466,7 +464,6 @@ color: var(--card-text-color); } - /* The following groups the header and title on considering cards */ .card__header { color: var(--color-ink); padding-block-start: calc(var(--card-padding-block) / 2); @@ -480,16 +477,6 @@ .card__body { padding-block: 0 var(--card-padding-block); } - /* End */ - - /* The Uncomment the following to add borders and such */ - /* - .card__collection { - border-block-end: var(--card-border); - border-inline-end: var(--card-border); - } - */ - /* End */ .card--drafted { --card-color: var(--color-ink-medium) !important; @@ -508,7 +495,6 @@ } } - .card.card--new { --border-color: var(--color-selected-dark); --border-size: 1px; diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index c864655a4..11c394ff8 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -5,7 +5,7 @@ --panel-padding: var(--block-space); --panel-size: auto; --popup-icon-size: 24px; - --popup-item-padding-inline: var(--inline-space-half); + --popup-item-padding-inline: 0.5rem; inset: 0 auto auto 50%; max-block-size: 80vh; @@ -122,14 +122,6 @@ } } } - - &:has(> :first-child:not(.popup__btn)) { - padding-inline-start: var(--popup-item-padding-inline); - } - - &:has(> :last-child:not(.popup__btn)) { - padding-inline-end: var(--popup-item-padding-inline); - } } /* The actionable thing with padding within popup__item */ @@ -165,6 +157,7 @@ --icon-size: 1em; inline-size: var(--popup-icon-size); + margin-inline-start: var(--popup-item-padding-inline); } .popup__radio { @@ -172,6 +165,7 @@ block-size: var(--popup-icon-size); inline-size: var(--popup-icon-size); + margin-inline-start: var(--popup-item-padding-inline); flex-shrink: 0; &:hover { diff --git a/app/views/collections/show/_column.html.erb b/app/views/collections/show/_column.html.erb index 147593c6d..cc7ac0697 100644 --- a/app/views/collections/show/_column.html.erb +++ b/app/views/collections/show/_column.html.erb @@ -11,15 +11,5 @@ <%= render "collections/show/menu/column", column: column %> <% end %> -