gin-title.css

Same filename and directory in other branches
  1. main core/themes/default_admin/migration/css/base/gin-title.css
/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */
.block-page-title-block {
  &:last-child {
    margin-block-end: 0;
  }
}
.page-title {
  overflow: hidden;
  max-width: 90%;
  padding-inline-end: 0.25em;
  white-space: nowrap;
  letter-spacing: -0.05em;
  text-overflow: ellipsis;
  color: var(--gin-color-title);
  font-size: var(--gin-font-size-h1);
  font-weight: var(--gin-font-weight-bold);
  line-height: normal;

  @media (prefers-reduced-motion: no-preference) {
    transition: font-size 0.25s ease;
  }

  @media (min-width: 64em) {
    .region-sticky--is-sticky & {
      font-size: var(--gin-font-size-h3);
    }
  }
}
.page-title__language {
  display: block;
  letter-spacing: normal;
  color: var(--gin-color-text);
  font-size: var(--gin-font-size-xs);
  font-weight: var(--gin-font-weight-normal);
}
.page-title--is-translation + .shortcut-action .shortcut-action__icon {
  inset-block-start: -0.1875rem;
}
.shortcut-action {
  position: relative;
  align-self: center;
  margin-inline-start: 0;
  border-radius: var(--gin-border-m);
}
.shortcut-action__icon {
  position: relative;
  inset-block-start: 0.1875rem;
  background: var(--gin-icon-color);
  mask-image: var(--admin-icon-shortcut);
  mask-size: 75% 75%;
  mask-position: center center;
  mask-repeat: no-repeat;

  .gin--edit-form & {
    inset-block-start: 0.1875rem;
  }

  @media (min-width: 64em) {
    inset-block-start: var(--gin-spacing-xxs);
    mask-size: 85% 85%;
  }
}
.shortcut-action:hover .shortcut-action__icon {
  opacity: 1;
  background: var(--gin-color-primary);
}
.shortcut-action--remove {
  .shortcut-action__icon {
    mask-image: var(--admin-icon-shortcut-filled);
    background: var(--gin-color-primary);
  }

  &:hover .shortcut-action__icon {
    opacity: 1;
    background: var(--gin-color-disabled);
  }
}
.shortcut-action__message {
  position: absolute;
  z-index: 2;
  min-width: 7.5rem;
  margin-block-start: calc(var(--gin-spacing-xxs) * -1);
  padding: var(--gin-spacing-xs);
  white-space: nowrap;
  pointer-events: none;
  color: var(--gin-color-contextual-text);
  border-radius: var(--gin-border-xs);
  background: var(--gin-color-contextual);
  inset-block-start: 0;
  inset-inline-start: 100%;
}

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/base/gin-title.css

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. .block-page-title-block {

  8.   &:last-child {

  9.     margin-block-end: 0;

  10.   }

  11. }

  12. .page-title {

  13.   overflow: hidden;

  14.   max-width: 90%;

  15.   padding-inline-end: 0.25em;

  16.   white-space: nowrap;

  17.   letter-spacing: -0.05em;

  18.   text-overflow: ellipsis;

  19.   color: var(--gin-color-title);

  20.   font-size: var(--gin-font-size-h1);

  21.   font-weight: var(--gin-font-weight-bold);

  22.   line-height: normal;

  23. 

  24.   @media (prefers-reduced-motion: no-preference) {

  25.     transition: font-size 0.25s ease;

  26.   }

  27. 

  28.   @media (min-width: 64em) {

  29.     .region-sticky--is-sticky 
  30.   }

  31. }

  32. .page-title__language {

  33.   display: block;

  34.   letter-spacing: normal;

  35.   color: var(--gin-color-text);

  36.   font-size: var(--gin-font-size-xs);

  37.   font-weight: var(--gin-font-weight-normal);

  38. }

  39. .page-title--is-translation + .shortcut-action .shortcut-action__icon {

  40.   inset-block-start: -0.1875rem;

  41. }

  42. .shortcut-action {

  43.   position: relative;

  44.   align-self: center;

  45.   margin-inline-start: 0;

  46.   border-radius: var(--gin-border-m);

  47. }

  48. .shortcut-action__icon {

  49.   position: relative;

  50.   inset-block-start: 0.1875rem;

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

  52.   mask-image: var(--admin-icon-shortcut);

  53.   mask-size: 75% 75%;

  54.   mask-position: center center;

  55.   mask-repeat: no-repeat;

  56. 

  57.   .gin--edit-form 
  58. 

  59.   @media (min-width: 64em) {

  60.     inset-block-start: var(--gin-spacing-xxs);

  61.     mask-size: 85% 85%;

  62.   }

  63. }

  64. .shortcut-action:hover .shortcut-action__icon {

  65.   opacity: 1;

  66.   background: var(--gin-color-primary);

  67. }

  68. .shortcut-action--remove {

  69.   .shortcut-action__icon {

  70.     mask-image: var(--admin-icon-shortcut-filled);

  71.     background: var(--gin-color-primary);

  72.   }

  73. 

  74.   &:hover .shortcut-action__icon {

  75.     opacity: 1;

  76.     background: var(--gin-color-disabled);

  77.   }

  78. }

  79. .shortcut-action__message {

  80.   position: absolute;

  81.   z-index: 2;

  82.   min-width: 7.5rem;

  83.   margin-block-start: calc(var(--gin-spacing-xxs) * -1);

  84.   padding: var(--gin-spacing-xs);

  85.   white-space: nowrap;

  86.   pointer-events: none;

  87.   color: var(--gin-color-contextual-text);

  88.   border-radius: var(--gin-border-xs);

  89.   background: var(--gin-color-contextual);

  90.   inset-block-start: 0;

  91.   inset-inline-start: 100%;

  92. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.