1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- /**
- * @file
- * Image preview component.
- */
- @import "../base/variables.pcss.css";
- :root {
- --color-pattern: var(--color-lightgray);
- --size-pattern-square: calc(7rem / 16);
- }
- /**
- * Image preview.
- */
- .image-preview {
- line-height: 0;
- }
- .image-preview__img-wrapper {
- display: inline-block;
- max-width: 100%;
- background-color: var(--color-white);
- box-shadow: inset 0 0 var(--size-pattern-square) var(--color-pattern);
- }
- .image-preview img {
- background-image:
- linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%),
- linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%),
- linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%),
- linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%);
- background-position:
- 0 0,
- var(--size-pattern-square) var(--size-pattern-square),
- var(--size-pattern-square) var(--size-pattern-square),
- 0 0;
- background-size: calc(var(--size-pattern-square) * 2) calc(var(--size-pattern-square) * 2);
- }
- @media screen and (-ms-high-contrast: active) {
- .image-preview img {
- background: none;
- }
- }
- /**
- * Don't display file icon in image widgets.
- */
- .image-widget .file.file {
- padding: 0; /* LTR and RTL */
- background: none;
- }
|