diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css index ec90b8e58..86a4a86cb 100644 --- a/app/assets/stylesheets/card-columns.css +++ b/app/assets/stylesheets/card-columns.css @@ -92,29 +92,25 @@ display: none; } - .card__background { - .card:has(& img:not([src=""])) { - .card__content, - .card__meta, - .workflow-stage:not(.workflow-stage--current) { - opacity: 0; - transition: opacity 0.2s ease-in-out; + .card:has(.card__background img:not([src=""])) { + .card__content, + .card__meta, + .workflow-stage:not(.workflow-stage--current) { + opacity: 0; + transition: opacity 0.2s ease-in-out; - @media (any-hover: hover) { - .card:hover & { + @media (any-hover: hover) { + .card:hover & { opacity: 1; } - } } } + } - @media (any-hover: hover) { - .card:hover & { - img:not([src=""]) { - filter: blur(3px) brightness(1.2); - opacity: 0.2; - } - } + @media (any-hover: hover) { + .card:has(.card__background img:not([src=""])):hover .card__background img:not([src=""]) { + filter: blur(3px) brightness(1.2); + opacity: 0.2; } } diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 1f2c4b84b..1efff8c97 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -308,11 +308,11 @@ position: absolute; rotate: 5deg; transform-origin: top right; + } - .card:has(&), - .card-perma:has(&) { - --card-color: var(--color-card-complete) !important; - } + .card:has(.card__closed), + .card-perma:has(.card__closed) { + --card-color: var(--color-card-complete) !important; } .card__closed-title { diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css index 5b621bbf9..c16447eaa 100644 --- a/app/assets/stylesheets/filters.css +++ b/app/assets/stylesheets/filters.css @@ -3,11 +3,14 @@ position: relative; view-transition-name: "filters"; z-index: var(--z-popup); + } - #header:has(&) { - position: relative; - z-index: var(--z-popup); - } + #header:has(.filters) { + position: relative; + z-index: var(--z-popup); + } + + .filters { .btn { --btn-border-color: var(--color-ink-medium); diff --git a/app/assets/stylesheets/inputs.css b/app/assets/stylesheets/inputs.css index 1a9afd70a..e0ca57536 100644 --- a/app/assets/stylesheets/inputs.css +++ b/app/assets/stylesheets/inputs.css @@ -60,13 +60,11 @@ cursor: pointer; opacity: 0; } + } - &:focus, - &:focus-visible { - .input--file:has(&) { - outline: 0.15rem solid var(--color-selected-dark); - } - } + &:has(input[type="file"]:focus), + &:has(input[type="file"]:focus-visible) { + outline: 0.15rem solid var(--color-selected-dark); } &:is(.avatar) { diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index e9c3bcbaf..186bfa53e 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -31,16 +31,16 @@ --panel-padding: var(--block-space) var(--block-space) 0 var(--block-space); } - #header:has(&) { - position: relative; - z-index: var(--z-nav); - } - .card & { inline-size: 260px; } } + #header:has(.popup) { + position: relative; + z-index: var(--z-nav); + } + .popup__footer { background-color: var(--color-canvas); border-block-start: 1px solid var(--color-ink-lighter); diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css index b5ca20116..f1e0fc6d4 100644 --- a/app/assets/stylesheets/rich-text-content.css +++ b/app/assets/stylesheets/rich-text-content.css @@ -50,11 +50,12 @@ margin-inline: auto; max-block-size: 32rem; object-fit: contain; + } - /* Links should hug media contained within */ - a:has(&) { - display: inline-block; - } + /* Links should hug media contained within */ + a:has(img), + a:has(video) { + display: inline-block; } /* Avoid extra space due to empty paragraphs */