Commit faa5962f authored by Ben Mullins's avatar Ben Mullins Committed by Sascha Eggenberger
Browse files

Issue #3373294: Toolbar icons not visible in forced colors / high contrast mode

parent 5f87deca

dist/css/components/toolbar.css

+17 −0
Original line number Diff line number Diff line
@@ -148,6 +148,17 @@ body.gin--classic-toolbar { 
          mask-size: var(--gin-icon-size-toolbar) var(--gin-icon-size-toolbar);

}



@media (forced-colors: active) {

  .toolbar .toolbar-bar #toolbar-item-administration-search::before,

  .toolbar .toolbar-bar .toolbar-menu-administration .toolbar-icon::before,

  .toolbar .toolbar-bar .toolbar-menu-administration .responsive-preview-icon::before,

  .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item::before,

  .toolbar .toolbar-bar .toolbar-icon-toggle-vertical::before,

  .toolbar .toolbar-bar .toolbar-icon-toggle-horizontal::before {

    background: linktext !important;

  }

}



.toolbar .toolbar-bar #toolbar-item-administration-search.toolbar-icon-default::before,

.toolbar .toolbar-bar .toolbar-menu-administration .toolbar-icon.toolbar-icon-default::before,

.toolbar .toolbar-bar .toolbar-menu-administration .toolbar-icon-default.responsive-preview-icon::before,
@@ -669,6 +680,12 @@ body.gin--classic-toolbar { 
  background-color: var(--gin-icon-color);

}



@media (forced-colors: active) {

  .toolbar.toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon::before, .toolbar.toolbar-secondary .toolbar-bar .toolbar-tab > .responsive-preview-icon::before {

    background: linktext !important;

  }

}



[dir="ltr"] .toolbar.toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item::before, [dir="ltr"] .toolbar.toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item.responsive-preview-icon::before {

  left: .55rem;

}

dist/css/layout/toolbar.css

+18 −0
Original line number Diff line number Diff line
@@ -310,7 +310,15 @@ a.toolbar-menu__trigger, 
  [dir="rtl"] .toolbar-menu-administration a.toolbar-menu__trigger::before {

    right: calc((var(--gin-toolbar-width-collapsed) - 36px) / 2);

  }

}



@media (min-width: 61em) and (forced-colors: active) {

  .toolbar-menu-administration a.toolbar-menu__trigger::before {

    background: var(--gin-bg-layer) url("data:image/svg+xml,%3Csvg width='9' height='14' viewBox='0 0 9 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 1.7109375,0.31445312 0.2890625,1.7226562 5.5917969,7.0761719 0.2890625,12.429688 1.7109375,13.837891 8.4082031,7.0761719 Z' fill='linkText'/%3E%3C/svg%3E") no-repeat center center;

  }

}



@media (min-width: 61em) {

  .toolbar-menu-administration a.toolbar-menu__trigger.is-active {

    display: flex;

    font-weight: var(--gin-font-weight-normal);
@@ -329,19 +337,27 @@ a.toolbar-menu__trigger, 
  [dir="rtl"] .toolbar-menu-administration a.toolbar-menu__trigger.is-active:before {

    transform: rotate(-180deg);

  }

}



@media (min-width: 61em) {

  .toolbar-menu-administration a.toolbar-menu__trigger .menu {

    display: none;

  }

}



@media (min-width: 61em) {

  .toolbar-menu-administration a.toolbar-menu__trigger .close {

    display: inline;

  }

}



@media (min-width: 61em) {

  .toolbar-tab--toolbar-item-administration {

    order: -1;

  }

}



@media (min-width: 61em) {

  .toolbar-menu-administration {

    display: flex;

    position: fixed;
@@ -637,7 +653,9 @@ a.toolbar-menu__trigger, 
    color: var(--gin-color-primary-hover);

    background: var(--gin-color-primary-light);

  }

}



@media (min-width: 61em) {

  .toolbar .toolbar-toggle-orientation button {

    display: none;

  }

styles/components/toolbar.scss

+8 −0
Original line number Diff line number Diff line
@@ -109,6 +109,10 @@ body.gin--classic-toolbar { 
        mask-repeat: no-repeat;

        mask-position: center center;

        mask-size: var(--gin-icon-size-toolbar) var(--gin-icon-size-toolbar);



        @media (forced-colors: active) {

          background: linktext !important;

        }

      }



      &.toolbar-icon-default::before {
@@ -630,6 +634,10 @@ body.gin--classic-toolbar { 


.toolbar.toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon::before {

  background-color: var(--gin-icon-color);



  @media (forced-colors: active) {

    background: linktext !important;

  }

}



.toolbar.toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon.toolbar-icon-edit.toolbar-item::before {

styles/layout/toolbar.scss

+4 −0
Original line number Diff line number Diff line
@@ -264,6 +264,10 @@ a.toolbar-menu__trigger, 
      background: var(--gin-bg-layer) url("data:image/svg+xml,%3Csvg width='9' height='14' viewBox='0 0 9 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 1.7109375,0.31445312 0.2890625,1.7226562 5.5917969,7.0761719 0.2890625,12.429688 1.7109375,13.837891 8.4082031,7.0761719 Z' fill='%23999999'/%3E%3C/svg%3E") no-repeat center center;

      background-size: 11px 11px;

      transition: transform var(--gin-transition);



      @media (forced-colors: active) {

        background: var(--gin-bg-layer) url("data:image/svg+xml,%3Csvg width='9' height='14' viewBox='0 0 9 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 1.7109375,0.31445312 0.2890625,1.7226562 5.5917969,7.0761719 0.2890625,12.429688 1.7109375,13.837891 8.4082031,7.0761719 Z' fill='linkText'/%3E%3C/svg%3E") no-repeat center center;

      }

    }



    &.is-active {