diff --git a/app/assets/stylesheets/alchemy/archive.scss b/app/assets/stylesheets/alchemy/archive.scss index 8b1658e055..0483559d09 100644 --- a/app/assets/stylesheets/alchemy/archive.scss +++ b/app/assets/stylesheets/alchemy/archive.scss @@ -46,8 +46,6 @@ div#image_assign_filter_and_image_sizing { align-items: center; justify-content: center; background-color: $thumbnail-background-color; - width: 100%; - height: 120px; &:hover { text-decoration: none; @@ -55,17 +53,22 @@ div#image_assign_filter_and_image_sizing { } .picture_thumbnail { + --picture-thumbnail-border-radius: var(--border-radius_medium); + max-width: 100%; margin: 2 * $default-margin; background-color: #fff; position: relative; - box-shadow: 0 0 0 1px $default-border-color; - width: 160px; + box-shadow: 1px 1px 1px 0 $default-border-color; + border-radius: var(--picture-thumbnail-border-radius); + padding-bottom: 2.5em; - img { - width: 100%; - height: 100%; - object-fit: contain; + img, + .thumbnail_background { + border-top-right-radius: var(--picture-thumbnail-border-radius); + border-top-left-radius: var(--picture-thumbnail-border-radius); + } + img { &[src$=".svg"] { width: auto; height: auto; @@ -73,34 +76,18 @@ div#image_assign_filter_and_image_sizing { } .picture_name { - display: block; + position: absolute; width: 100%; text-align: center; white-space: nowrap; overflow: hidden; bottom: 0; left: 0; - line-height: 2; + line-height: 2.5; padding: 0 $default-padding; text-overflow: ellipsis; } - &.small { - width: 80px; - - .thumbnail_background { - height: 60px; - } - } - - &.large { - width: 240px; - - .thumbnail_background { - height: 180px; - } - } - &:hover { .picture_tool, .picture_tags { @@ -114,6 +101,7 @@ div#image_assign_filter_and_image_sizing { #overlay_picture_list { display: flex; flex-wrap: wrap; + align-items: end; } #pictures { diff --git a/app/assets/stylesheets/alchemy/elements.scss b/app/assets/stylesheets/alchemy/elements.scss index b3de6d8031..2f5db1ee4c 100644 --- a/app/assets/stylesheets/alchemy/elements.scss +++ b/app/assets/stylesheets/alchemy/elements.scss @@ -286,6 +286,10 @@ width: 100%; } + .ingredient-editor.picture { + padding-right: 1px; + } + .picture_thumbnail { margin: 0; } @@ -455,14 +459,6 @@ flex-wrap: wrap; } -.picture_thumbnail .picture_image { - overflow: hidden; - - img.img_paddingtop { - @extend .disable-user-select; - } -} - #fixed-elements { min-height: 100px; } @@ -563,25 +559,50 @@ .ingredient-editor.picture { position: relative; + width: 50%; + padding-left: 1px; // Compensate the box shadow + + + .picture { + padding-left: $default-padding; + padding-right: 1px; // Compensate the box shadow + } .picture_thumbnail { display: inline-block; width: 160px; margin: $default-margin 0; padding-bottom: 28px; + + .picture_image { + overflow: hidden; + border-top-right-radius: var(--picture-thumbnail-border-radius); + border-top-left-radius: var(--picture-thumbnail-border-radius); + + img.img_paddingtop { + @extend .disable-user-select; + } + } + + img { + --picture-thumbnail-border-radius: 0; + } } &.validation_failed .picture_thumbnail { border-color: $error_border_color; } - .thumbnail_background .icon { - font-size: 4em; - color: $medium-gray; - vertical-align: top; + .thumbnail_background { + height: 120px; + + .icon { + font-size: 4em; + color: $medium-gray; + vertical-align: top; - &.error { - font-size: 1.2em; + &.error { + font-size: 1.2em; + } } } @@ -839,17 +860,6 @@ select.long { } } } - - &.picture { - width: 50%; - padding-left: 1px; // Compensate the box shadow - padding-right: $default-padding; - - + .picture { - padding-left: $default-padding; - padding-right: 1px; // Compensate the box shadow - } - } } div.pictures_for_element {