diff --git a/resources/js/components/PanelListingGridItem.vue b/resources/js/components/PanelListingGridItem.vue index ba58222..c479c10 100644 --- a/resources/js/components/PanelListingGridItem.vue +++ b/resources/js/components/PanelListingGridItem.vue @@ -15,12 +15,7 @@ v-if="!batchSelectDisabled && IOwnThisPanel" > - + @@ -361,15 +356,25 @@ $authors-height: $font-size-sm; right: 2vw; opacity: 1; } + +$panel-select-button-diameter: $image-height * 0.1; .sd-grid-item--image-header { - cursor: auto; position: absolute; top: 0; left: 0; z-index: 2; + height: $panel-select-button-diameter * 2; width: 100%; padding: 6px; } +.sd-grid-image-container-inner:hover .sd-grid-item--image-header { + background-image: linear-gradient( + to bottom, + rgba(0, 0, 0, .50), + rgba(0, 0, 0, .30), + transparent + ); +} .sd-grid-item--image-footer { position: absolute; @@ -397,7 +402,6 @@ $authors-height: $font-size-sm; color:#634782; } -$panel-select-button-diameter: $image-height * 0.1; .panel-select-button { // vertically align the green checkmark inside the button display: flex; @@ -414,14 +418,26 @@ $panel-select-button-diameter: $image-height * 0.1; width: $panel-select-button-diameter; height: $panel-select-button-diameter; - background-color: $mostly-white-gray-opaque; - border: solid 1px $very-light-gray; + background-color: $mostly-white-gray; border-radius: 50%; + + svg { + color: $light-gray; + } } .panel-select-button:hover, .panel-select-button:focus { - background-color: $very-light-gray-opaque; - border: solid 1px $light-gray; + background-color: $very-light-gray; + + svg { + color: gray; + } +} +.panel-select-button.bg-success svg { + color: $mostly-white-gray; +} +.panel-select-button.bg-success:hover svg { + color: $very-light-gray; } .sd-grid-item::v-deep .modal-dialog {