Verified Commit 09fef26d authored by Mike Herchel's avatar Mike Herchel
Browse files

fix: #3506333 Improve the perceptibility of contextual link buttons 

By: rkoller
By: mgifford
By: kentr
By: mherchel
By: alex ua
By: smustgrave
parent 90701646

core/themes/default_admin/css/components/contextual-links.css

+25 −6
Changes for core/themes/default_admin/css/components/contextual-links.css: 25 added lines, 6 removed lines.
Original line number Diff line number Diff line
@@ -23,7 +23,7 @@ 
  .trigger {

    overflow: clip;

    text-indent: -62.4375rem;

    border: 1px solid var(--admin-color-border);

    border: 1px solid var(--admin-color-border-input);

    border-radius: 50%;

    background: var(--admin-color-bg-raised);

    box-shadow: 0 2px 4px rgb(0, 0, 0, 0.15);
@@ -43,13 +43,9 @@ 
      content: "";

      background: var(--admin-color-primary);

      inset: 0;

      mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e  %3cg fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e    %3cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'%3e%3c/path%3e  %3c/g%3e%3c/svg%3e");

      mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' d='M14.6 3 13 1.4a1 1 0 0 0-1.4 0l-1.3 1.4 3 3 1.2-1.3a1 1 0 0 0 0-1.4M5.2 13.6l-3-3 7-7 3 3zm-4.3 1c0 .3 0 .5.3.4l2-.7-1.6-1.6z'/%3e%3c/svg%3e");

      mask-size: var(--admin-space-s);

      mask-position: 100% 100%;



      @media (forced-colors: active) {

        background: buttonText;

      }

    }



    &:hover {
@@ -57,6 +53,29 @@ 
        0 0 0 1px var(--admin-color-focus-border),

        0 0 0 4px var(--admin-color-focus);

    }



    @media (forced-colors: active) {

      border-color: buttonText;

      background: buttonFace;

      box-shadow: none;



      &::before {

        background: buttonText;

      }



      &:hover,

      &:focus,

      &:focus-visible {

        border-color: highlight;

        outline: 2px solid highlight;

        outline-offset: 2px;

        background: highlight;



        &::before {

          background: highlightText;

        }

      }

    }

  }



  &.open .trigger {

core/themes/default_admin/css/components/contextual-links.pcss.css

+25 −6
Changes for core/themes/default_admin/css/components/contextual-links.pcss.css: 25 added lines, 6 removed lines.
Original line number Diff line number Diff line
@@ -16,7 +16,7 @@ 
  .trigger {

    overflow: clip;

    text-indent: -999px;

    border: 1px solid var(--admin-color-border);

    border: 1px solid var(--admin-color-border-input);

    border-radius: 50%;

    background: var(--admin-color-bg-raised);

    box-shadow: 0 2px 4px rgb(0, 0, 0, 0.15);
@@ -36,13 +36,9 @@ 
      content: "";

      background: var(--admin-color-primary);

      inset: 0;

      mask-image: url("../../migration/media/icons/media-library/media-edit.svg");

      mask-image: url("../../images/icons/currentColor/media-edit.svg");

      mask-size: var(--admin-space-s);

      mask-position: 100% 100%;



      @media (forced-colors: active) {

        background: buttonText;

      }

    }



    &:hover {
@@ -50,6 +46,29 @@ 
        0 0 0 1px var(--admin-color-focus-border),

        0 0 0 4px var(--admin-color-focus);

    }



    @media (forced-colors: active) {

      border-color: buttonText;

      background: buttonFace;

      box-shadow: none;



      &::before {

        background: buttonText;

      }



      &:hover,

      &:focus,

      &:focus-visible {

        border-color: highlight;

        outline: 2px solid highlight;

        outline-offset: 2px;

        background: highlight;



        &::before {

          background: highlightText;

        }

      }

    }

  }



  &.open .trigger {

core/themes/default_admin/images/icons/currentColor/media-edit.svg

0 → 100644
+1 −0
Changes for core/themes/default_admin/images/icons/currentColor/media-edit.svg: 1 added line, 0 removed lines.
Original line number Diff line number Diff line 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M14.6 3 13 1.4a1 1 0 0 0-1.4 0l-1.3 1.4 3 3 1.2-1.3a1 1 0 0 0 0-1.4M5.2 13.6l-3-3 7-7 3 3zm-4.3 1c0 .3 0 .5.3.4l2-.7-1.6-1.6z"/></svg>
 
 No newline at end of file