Commit 8da45490 authored by James Wilson's avatar James Wilson Committed by Sascha Eggenberger
Browse files

Issue #3278033: Add transparency layer behind images in Media Library

parent 4355a99d

dist/css/base/gin.css

+21 −0
Original line number Diff line number Diff line
@@ -4663,3 +4663,24 @@ blockquote::before { 
  right: 0;

}



.image-preview img {

  background-color: var(--colorGinPatternFallback);

  background-size: calc(var(--ginSizePatternSquare) * 2) calc(var(--ginSizePatternSquare) * 2);

}



[dir="ltr"] .image-preview img {

  background-image: linear-gradient(-45deg, var(--colorGinPattern) 25%, transparent 26%), linear-gradient(-45deg, var(--colorGinPattern) 25%, transparent 26%), linear-gradient(135deg, var(--colorGinPattern) 25%, transparent 26%), linear-gradient(135deg, var(--colorGinPattern) 25%, transparent 26%);

  background-position: 0 0, var(--ginSizePatternSquare) var(--ginSizePatternSquare), var(--ginSizePatternSquare) var(--ginSizePatternSquare), 0 0;

}



[dir="rtl"] .image-preview img {

  background-image: linear-gradient(45deg, var(--colorGinPattern) 25%, transparent 26%), linear-gradient(45deg, var(--colorGinPattern) 25%, transparent 26%), linear-gradient(-135deg, var(--colorGinPattern) 25%, transparent 26%), linear-gradient(-135deg, var(--colorGinPattern) 25%, transparent 26%);

  background-position: 100% 0, var(--ginSizePatternSquare) var(--ginSizePatternSquare), var(--ginSizePatternSquare) var(--ginSizePatternSquare), 100% 0;

}



@media screen and (-ms-high-contrast: active) {

  .image-preview img {

    background: none;

  }

}

dist/css/components/media_library.css

+21 −0
Original line number Diff line number Diff line
@@ -42,6 +42,27 @@ 
  background: none;

}



.media-library-item img {

  background-color: var(--colorGinPatternFallback);

  background-size: calc(var(--ginSizePatternSquare) * 2) calc(var(--ginSizePatternSquare) * 2);

}



[dir="ltr"] .media-library-item img {

  background-image: linear-gradient(-45deg, var(--colorGinPattern) 25%, transparent 26%), linear-gradient(-45deg, var(--colorGinPattern) 25%, transparent 26%), linear-gradient(135deg, var(--colorGinPattern) 25%, transparent 26%), linear-gradient(135deg, var(--colorGinPattern) 25%, transparent 26%);

  background-position: 0 0, var(--ginSizePatternSquare) var(--ginSizePatternSquare), var(--ginSizePatternSquare) var(--ginSizePatternSquare), 0 0;

}



[dir="rtl"] .media-library-item img {

  background-image: linear-gradient(45deg, var(--colorGinPattern) 25%, transparent 26%), linear-gradient(45deg, var(--colorGinPattern) 25%, transparent 26%), linear-gradient(-135deg, var(--colorGinPattern) 25%, transparent 26%), linear-gradient(-135deg, var(--colorGinPattern) 25%, transparent 26%);

  background-position: 100% 0, var(--ginSizePatternSquare) var(--ginSizePatternSquare), var(--ginSizePatternSquare) var(--ginSizePatternSquare), 100% 0;

}



@media screen and (-ms-high-contrast: active) {

  .media-library-item img {

    background: none;

  }

}



.media-library-item--grid {

  border-radius: var(--ginBorderBig);

}

dist/css/theme/variables.css

+5 −0
Original line number Diff line number Diff line
@@ -47,6 +47,9 @@ 
  --colorGinSwitch: #0e9888;

  --colorGinSwitchShadow: rgba(38, 167, 105, .3);

  --colorGinIcons: #414247;

  --colorGinPatternFallback: var(--colorGinLayer2Background);

  --colorGinPattern: var(--colorGinBorder);

  --ginSizePatternSquare: .5rem;

  --ginStickyHeight: 72px;

  --colorGinStickyBg: #c8cdd8;

  --ginToolbarWidthCollapsed: 66px;
@@ -117,6 +120,8 @@ 
  --ginShadowLevel1: 0 1px 2px rgb(0 0 0 / 2%), 0 3px 4px rgb(0 0 0 / 3%), 0 5px 8px rgb(0 0 0 / 4%);

  --ginShadowLevel2: 0 1px 2px rgb(0 0 0 / 2%), 0 3px 4px rgb(0 0 0 / 3%), 0 5px 8px rgb(0 0 0 / 4%), 0 20px 24px rgb(0 0 0 / 12%);

  --colorGinIcons: #888;

  --colorGinPatternFallback: var(--colorGinLayer2Background);

  --colorGinPattern: var(--colorGinBorder);

  --colorGinStickyBg: var(--colorGinLayer4Background);

}

styles/base/_image-preview.scss

0 → 100644
+5 −0
Original line number Diff line number Diff line 
.image-preview {

  img {

    @include color-pattern;

  }

}

styles/components/media_library.scss

+4 −0
Original line number Diff line number Diff line
@@ -50,6 +50,10 @@ 
.media-library-item {

  background: none;



  img {

    @include color-pattern;

  }



  &--grid {

    border-radius: var(--ginBorderBig);