.resources-header { padding: 0 2 * $default-padding; } .applied-filter { display: inline-block; padding: 2px 6px; border-radius: $default-border-radius; border: 1px solid $default-border-color; white-space: nowrap; font-weight: normal; .dismiss-filter { position: relative; top: -1px; } } .resources-table-wrapper { padding-bottom: 60px; &.with_tag_filter { width: calc(100% - 235px); overflow-x: auto; } } .selected_item_tools { margin: -2 * $default-padding; border-bottom: 1px solid $default-border-color; margin-bottom: 4 * $default-padding; padding: 4 * $default-padding; .button { vertical-align: middle; } } .thumbnail_background { position: relative; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 1px 1px $default-border-color; &:hover { text-decoration: none; } } .picture_thumbnail { --picture-thumbnail-border-radius: var(--border-radius_medium); display: flex; align-items: center; justify-content: center; width: var(--picture-thumbnail-width); height: var(--picture-thumbnail-height); position: relative; border-radius: var(--picture-thumbnail-border-radius); padding: 2 * $default-padding; padding-bottom: 2.5em; transition: all $transition-duration; img, .thumbnail_background { border-radius: var(--picture-thumbnail-border-radius); } img { max-width: 100%; max-height: 100%; &:not([src*="alchemy/missing-image"]) { background: $thumbnail-background; } &[src$=".svg"]:not([src*="alchemy/missing-image"]) { width: var(--picture-width); max-height: var(--picture-height); } } .picture_name { position: absolute; width: 100%; text-align: center; white-space: nowrap; overflow: hidden; bottom: 0; left: 0; line-height: 2.5; padding: 0 $default-padding; text-overflow: ellipsis; } &:hover, &:focus-within { .picture_tool, .picture_tags { visibility: visible; opacity: 1; } } &:hover, &:focus-within, &.active { box-shadow: 0 0 4px 2px $default-border-color; .picture_tool.select { visibility: visible; opacity: 1; } } } #pictures, #overlay_picture_list { --picture-width: 160px; --picture-height: 120px; --picture-thumbnail-width: calc(var(--picture-width) + var(--spacing-2)); --picture-thumbnail-height: calc( var(--picture-height) + var(--spacing-2) + 2.5em ); display: grid; gap: 2 * $default-margin; grid-template-columns: repeat( auto-fill, minmax(var(--picture-thumbnail-width), auto) ); justify-items: center; &.picture-size--small { --picture-width: 80px; --picture-height: 60px; } &.picture-size--large { --picture-width: 240px; --picture-height: 180px; } } #picture_archive { overflow: visible; } #pictures { .thumbnail_background { @include zoom-in; } } div.assign_image_list_image { text-align: center; overflow: hidden; position: relative; img { border-style: none; } } .picture_tool { display: flex; width: 20px; height: 20px; align-items: center; justify-content: center; position: absolute; background-color: white; top: $default-padding; padding: $default-padding / 2; z-index: 10; border-radius: $default-border-radius; box-shadow: 0 0 1px $dark-gray; &:hover { text-decoration: none; } &.visible { visibility: visible; opacity: 1; } &.hidden { // Overwrite the `.hidden { display: none }` style display: block; } &.select { left: $default-padding; input { margin: 0; padding: 0; } } &.delete { cursor: pointer; right: $default-padding; } a { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; cursor: pointer; &:hover { text-decoration: none; } } } .picture_tags { overflow: hidden; position: absolute; bottom: 28px; left: 0; width: 100%; max-height: 80%; padding: $default-padding; pointer-events: none; .tag { box-shadow: 0 0 2px 2px $default-border-color; } } .picture_tags, .picture_tool { visibility: hidden; opacity: 0; transition: opacity $transition-duration; } div#library_sidebar { display: flex; flex-direction: column; position: fixed; border-left: 1px solid $default-border-color; top: 0; right: 0; width: 232px; padding: $top-menu-height + 2 * $default-padding 4 * $default-padding $pagination-height + 2 * $default-padding 4 * $default-padding; height: 100%; z-index: 3; background-color: $light-gray; h2 { margin-top: 4 * $default-margin; } h3 { margin: 2em 0 1em; } } .alchemy-dialog #library_sidebar { position: absolute; } div#filter_bar { .selectboxit { width: 194px; } } .alchemy-dialog-body { #library_sidebar { padding: 0 4 * $default-padding; } } #assign_image_list, #assign_file_list { position: relative; height: 558px; } #assign_image_list { padding-right: 240px; padding-bottom: 60px; } #overlay_picture_list { height: 100%; overflow: auto; .picture_thumbnail:hover { box-shadow: none; .thumbnail_background { box-shadow: 0 0 4px 4px $default-border-color; } } } #overlay_file_list { .assign_file_file { display: block; margin-bottom: 4px; word-break: break-all; &:hover { background-color: $light_yellow; } } > ul { margin: 0; padding: 4px 0; a { @extend %text-overflow; display: block; line-height: 25px; text-decoration: none; padding: $default-padding 2 * $default-padding; } .icon { margin-right: 4px; vertical-align: bottom; } } } #all_files td.name a { @include zoom-in; }