chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/panels/explain/components/consoleInsight.css

@@ -3,438 +3,439 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
-
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-
-:host {
-  font-family: var(--default-font-family);
-  font-size: inherit;
-  display: block;
-}
-
-.wrapper {
-  background-color: var(--sys-color-cdt-base-container);
-  border-radius: 16px;
-  container-type: inline-size;
-  display: grid;
-  animation: expand var(--sys-motion-duration-medium2) var(--sys-motion-easing-emphasized) forwards;
-}
-
-.wrapper.closing {
-  animation: collapse var(--sys-motion-duration-medium2) var(--sys-motion-easing-emphasized) forwards;
-}
-
-@keyframes expand {
-  from {
-    grid-template-rows: 0fr;
+@scope to (devtools-widget > *) {
+  * {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
   }
 
-  to {
-    grid-template-rows: 1fr;
+  :scope {
+    font-family: var(--default-font-family);
+    font-size: inherit;
+    display: block;
   }
-}
 
-@keyframes collapse {
-  from {
-    grid-template-rows: 1fr;
+  .wrapper {
+    background-color: var(--sys-color-cdt-base-container);
+    border-radius: 16px;
+    container-type: inline-size;
+    display: grid;
+    animation: expand var(--sys-motion-duration-medium2) var(--sys-motion-easing-emphasized) forwards;
   }
 
-  to {
-    grid-template-rows: 0fr;
-    padding-top: 0;
-    padding-bottom: 0;
+  .wrapper.closing {
+    animation: collapse var(--sys-motion-duration-medium2) var(--sys-motion-easing-emphasized) forwards;
   }
-}
 
-.animation-wrapper {
-  overflow: hidden;
-  padding: var(--sys-size-6) var(--sys-size-8);
-}
+  @keyframes expand {
+    from {
+      grid-template-rows: 0fr;
+    }
 
-.wrapper.top {
-  border-radius: 16px 16px 4px 4px;
-}
+    to {
+      grid-template-rows: 1fr;
+    }
+  }
 
-.wrapper.bottom {
-  margin-top: 5px;
-  border-radius: 4px 4px 16px 16px;
-}
+  @keyframes collapse {
+    from {
+      grid-template-rows: 1fr;
+    }
 
-header {
-  display: flex;
-  flex-direction: row;
-  gap: 6px;
-  color: var(--sys-color-on-surface);
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 500;
-  margin-bottom: var(--sys-size-6);
-  align-items: center;
-}
+    to {
+      grid-template-rows: 0fr;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
 
-header:focus-visible {
-  outline: none;
-}
+  .animation-wrapper {
+    overflow: hidden;
+    padding: var(--sys-size-6) var(--sys-size-8);
+  }
 
-header > .filler {
-  display: flex;
-  flex-direction: row;
-  gap: var(--sys-size-5);
-  align-items: center;
-  flex: 1;
-}
+  .wrapper.top {
+    border-radius: 16px 16px 4px 4px;
+  }
 
-.reminder-container {
-  border-radius: var(--sys-size-5);
-  background-color: var(--sys-color-surface4);
-  padding: var(--sys-size-8);
-  font-weight: var(--ref-typeface-weight-medium);
+  .wrapper.bottom {
+    margin-top: 5px;
+    border-radius: 4px 4px 16px 16px;
+  }
 
-  h3 {
-    font: inherit;
+  header {
+    display: flex;
+    flex-direction: row;
+    gap: 6px;
+    color: var(--sys-color-on-surface);
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 500;
+    margin-bottom: var(--sys-size-6);
+    align-items: center;
   }
-}
 
-.reminder-items {
-  display: grid;
-  grid-template-columns: var(--sys-size-8) auto;
-  gap: var(--sys-size-5) var(--sys-size-6);
-  margin-top: var(--sys-size-6);
-  line-height: var(--sys-size-8);
-  font-weight: var(--ref-typeface-weight-regular);
-}
+  header:focus-visible {
+    outline: none;
+  }
 
-main {
-  --override-markdown-view-message-color: var(--sys-color-on-surface);
+  header > .filler {
+    display: flex;
+    flex-direction: row;
+    gap: var(--sys-size-5);
+    align-items: center;
+    flex: 1;
+  }
 
-  color: var(--sys-color-on-surface);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
+  .reminder-container {
+    border-radius: var(--sys-size-5);
+    background-color: var(--sys-color-surface4);
+    padding: var(--sys-size-8);
+    font-weight: var(--ref-typeface-weight-medium);
 
-  p {
-    margin-block: 1em;
+    h3 {
+      font: inherit;
+    }
   }
 
-  ul {
-    list-style-type: none;
-    list-style-position: inside;
-    padding-inline-start: 0.2em;
+  .reminder-items {
+    display: grid;
+    grid-template-columns: var(--sys-size-8) auto;
+    gap: var(--sys-size-5) var(--sys-size-6);
+    margin-top: var(--sys-size-6);
+    line-height: var(--sys-size-8);
+    font-weight: var(--ref-typeface-weight-regular);
+  }
 
-    li {
-      display: list-item;
-      list-style-type: disc;
-      list-style-position: outside;
-      margin-inline-start: 1em;
+  main {
+    --override-markdown-view-message-color: var(--sys-color-on-surface);
+
+    color: var(--sys-color-on-surface);
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+
+    p {
+      margin-block: 1em;
     }
 
-    li::marker {
-      font-size: 11px;
-      line-height: 1;
+    ul {
+      list-style-type: none;
+      list-style-position: inside;
+      padding-inline-start: 0.2em;
+
+      li {
+        display: list-item;
+        list-style-type: disc;
+        list-style-position: outside;
+        margin-inline-start: 1em;
+      }
+
+      li::marker {
+        font-size: 11px;
+        line-height: 1;
+      }
     }
-  }
 
-  label {
-    display: inline-flex;
-    flex-direction: row;
-    gap: 0.5em;
+    label {
+      display: inline-flex;
+      flex-direction: row;
+      gap: 0.5em;
 
-    input,
-    span {
-      vertical-align: middle;
-    }
+      input,
+      span {
+        vertical-align: middle;
+      }
 
-    input[type="checkbox"] {
-      margin-top: 0.3em;
+      input[type="checkbox"] {
+        margin-top: 0.3em;
+      }
     }
   }
-}
-
-.opt-in-teaser {
-  display: flex;
-  gap: var(--sys-size-5);
-}
 
-devtools-markdown-view {
-  margin-bottom: 12px;
-}
+  .opt-in-teaser {
+    display: flex;
+    gap: var(--sys-size-5);
+  }
 
-footer {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  color: var(--sys-color-on-surface);
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  margin-top: 14px;
-  gap: 32px;
-}
+  devtools-markdown-view {
+    margin-bottom: 12px;
+  }
 
-@container (max-width: 600px) {
   footer {
-    gap: 8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: var(--sys-color-on-surface);
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    margin-top: 14px;
+    gap: 32px;
   }
-}
 
-footer > .filler {
-  flex: 1;
-}
+  @container (max-width: 600px) {
+    footer {
+      gap: 8px;
+    }
+  }
 
-footer .rating {
-  display: flex;
-  flex-direction: row;
-  gap: 8px;
-}
+  footer > .filler {
+    flex: 1;
+  }
 
-textarea {
-  height: 84px;
-  padding: 10px;
-  border-radius: 8px;
-  border: 1px solid var(--sys-color-neutral-outline);
-  width: 100%;
-  font-family: var(--default-font-family);
-  font-size: inherit;
-}
+  footer .rating {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
 
-.buttons {
-  display: flex;
-  gap: 5px;
-}
+  textarea {
+    height: 84px;
+    padding: 10px;
+    border-radius: 8px;
+    border: 1px solid var(--sys-color-neutral-outline);
+    width: 100%;
+    font-family: var(--default-font-family);
+    font-size: inherit;
+  }
 
-@media (width <= 500px) {
   .buttons {
-    flex-wrap: wrap;
+    display: flex;
+    gap: 5px;
   }
-}
-
-main .buttons {
-  margin-top: 12px;
-}
-
-.disclaimer {
-  display: flex;
-  gap: 2px;
-  color: var(--sys-color-on-surface-subtle);
-  font-size: 11px;
-  align-items: flex-start;
-  flex-direction: column;
-}
 
-.link {
-  color: var(--sys-color-primary);
-  text-decoration-line: underline;
+  @media (width <= 500px) {
+    .buttons {
+      flex-wrap: wrap;
+    }
+  }
 
-  devtools-icon {
-    color: var(--sys-color-primary);
-    width: 14px;
-    height: 14px;
+  main .buttons {
+    margin-top: 12px;
   }
-}
 
-button.link {
-  border: none;
-  background: none;
-  cursor: pointer;
-  font: inherit;
-}
+  .disclaimer {
+    display: flex;
+    gap: 2px;
+    color: var(--sys-color-on-surface-subtle);
+    font-size: 11px;
+    align-items: flex-start;
+    flex-direction: column;
+  }
 
-.loader {
-  background:
-    linear-gradient(
-      130deg,
-      transparent 0%,
-      var(--sys-color-gradient-tertiary) 20%,
-      var(--sys-color-gradient-primary) 40%,
-      transparent 60%,
-      var(--sys-color-gradient-tertiary) 80%,
-      var(--sys-color-gradient-primary) 100%
-    );
-  background-position: 0% 0%;
-  background-size: 250% 250%;
-  animation: gradient 5s infinite linear;
-}
+  .link {
+    color: var(--sys-color-primary);
+    text-decoration-line: underline;
 
-@keyframes gradient {
-  0% { background-position: 0 0; }
-  100% { background-position: 100% 100%; }
-}
+    devtools-icon {
+      color: var(--sys-color-primary);
+      width: 14px;
+      height: 14px;
+    }
+  }
 
-summary {
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-}
+  button.link {
+    border: none;
+    background: none;
+    cursor: pointer;
+    font: inherit;
+  }
 
-details {
-  overflow: hidden;
-  margin-top: 10px;
-}
+  .loader {
+    background:
+      linear-gradient(
+        130deg,
+        transparent 0%,
+        var(--sys-color-gradient-tertiary) 20%,
+        var(--sys-color-gradient-primary) 40%,
+        transparent 60%,
+        var(--sys-color-gradient-tertiary) 80%,
+        var(--sys-color-gradient-primary) 100%
+      );
+    background-position: 0% 0%;
+    background-size: 250% 250%;
+    animation: gradient 5s infinite linear;
+  }
 
-::details-content {
-  height: 0;
-  transition:
-    height var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized),
-    content-visibility var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized) allow-discrete;
-}
+  @keyframes gradient {
+    0% { background-position: 0 0; }
+    100% { background-position: 100% 100%; }
+  }
 
-[open]::details-content {
-  height: auto;
-}
+  summary {
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+  }
 
-details.references {
-  /* This transition is only added because there is no `transitionend` event in
-     JS for the `::details-content` transition. */
-  transition: margin-bottom var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized);
-}
+  details {
+    overflow: hidden;
+    margin-top: 10px;
+  }
 
-details.references[open] {
-  /* This transition does not affect the actual UI because of collapsing margins. */
-  margin-bottom: var(--sys-size-1);
-}
+  ::details-content {
+    height: 0;
+    transition:
+      height var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized),
+      content-visibility var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized) allow-discrete;
+  }
 
-h2 {
-  display: block;
-  font-size: var(--sys-size-7);
-  margin: 0;
-  font-weight: var(--ref-typeface-weight-medium);
-  line-height: var(--sys-size-9);
-}
+  [open]::details-content {
+    height: auto;
+  }
 
-h2:focus-visible {
-  outline: none;
-}
+  details.references {
+    /* This transition is only added because there is no `transitionend` event in
+      JS for the `::details-content` transition. */
+    transition: margin-bottom var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized);
+  }
 
-.info {
-  width: 20px;
-  height: 20px;
-}
+  details.references[open] {
+    /* This transition does not affect the actual UI because of collapsing margins. */
+    margin-bottom: var(--sys-size-1);
+  }
 
-.badge {
-  background: linear-gradient(135deg, var(--sys-color-gradient-primary), var(--sys-color-gradient-tertiary));
-  border-radius: var(--sys-size-3);
-  height: var(--sys-size-9);
+  h2 {
+    display: block;
+    font-size: var(--sys-size-7);
+    margin: 0;
+    font-weight: var(--ref-typeface-weight-medium);
+    line-height: var(--sys-size-9);
+  }
 
-  devtools-icon {
-    margin: var(--sys-size-2);
+  h2:focus-visible {
+    outline: none;
   }
-}
 
-.header-icon-container {
-  background: linear-gradient(135deg, var(--sys-color-gradient-primary), var(--sys-color-gradient-tertiary));
-  border-radius: var(--sys-size-4);
-  height: 36px;
-  width: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  .info {
+    width: 20px;
+    height: 20px;
+  }
 
-.close-button {
-  align-self: flex-start;
-}
+  .badge {
+    background: linear-gradient(135deg, var(--sys-color-gradient-primary), var(--sys-color-gradient-tertiary));
+    border-radius: var(--sys-size-3);
+    height: var(--sys-size-9);
 
-.sources-list {
-  padding-left: var(--sys-size-6);
-  margin-bottom: var(--sys-size-6);
-  list-style: none;
-  counter-reset: sources;
-  display: grid;
-  grid-template-columns: var(--sys-size-9) auto;
-  list-style-position: inside;
-}
+    devtools-icon {
+      margin: var(--sys-size-2);
+    }
+  }
 
-.sources-list li {
-  display: contents;
-}
+  .header-icon-container {
+    background: linear-gradient(135deg, var(--sys-color-gradient-primary), var(--sys-color-gradient-tertiary));
+    border-radius: var(--sys-size-4);
+    height: 36px;
+    width: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-.sources-list li::before {
-  counter-increment: sources;
-  content: "[" counter(sources) "]";
-  display: table-cell;
-}
+  .close-button {
+    align-self: flex-start;
+  }
 
-.sources-list x-link.highlighted {
-  animation: highlight-fadeout 2s;
-}
+  .sources-list {
+    padding-left: var(--sys-size-6);
+    margin-bottom: var(--sys-size-6);
+    list-style: none;
+    counter-reset: sources;
+    display: grid;
+    grid-template-columns: var(--sys-size-9) auto;
+    list-style-position: inside;
+  }
 
-@keyframes highlight-fadeout {
-  from {
-    background-color: var(--sys-color-yellow-container);
+  .sources-list li {
+    display: contents;
   }
 
-  to {
-    background-color: transparent;
+  .sources-list li::before {
+    counter-increment: sources;
+    content: "[" counter(sources) "]";
+    display: table-cell;
   }
-}
 
-.references-list {
-  padding-left: var(--sys-size-8);
-}
+  .sources-list x-link.highlighted {
+    animation: highlight-fadeout 2s;
+  }
 
-.references-list li {
-  padding-left: var(--sys-size-3);
-}
+  @keyframes highlight-fadeout {
+    from {
+      background-color: var(--sys-color-yellow-container);
+    }
 
-details h3 {
-  font-size: 10px;
-  font-weight: var(--ref-typeface-weight-medium);
-  text-transform: uppercase;
-  color: var(--sys-color-on-surface-subtle);
-  padding-left: var(--sys-size-6);
-}
+    to {
+      background-color: transparent;
+    }
+  }
 
-.error-message {
-  font: var(--sys-typescale-body4-bold);
-}
+  .references-list {
+    padding-left: var(--sys-size-8);
+  }
 
-@scope (.insight-sources) {
-  :root {
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
-    display: block;
+  .references-list li {
+    padding-left: var(--sys-size-3);
   }
 
-  ul {
-    color: var(--sys-color-primary);
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 18px;
-    margin-top: 8px;
+  details h3 {
+    font-size: 10px;
+    font-weight: var(--ref-typeface-weight-medium);
+    text-transform: uppercase;
+    color: var(--sys-color-on-surface-subtle);
     padding-left: var(--sys-size-6);
   }
 
-  li {
-    list-style-type: none;
+  .error-message {
+    font: var(--sys-typescale-body4-bold);
   }
 
-  ul .link {
-    color: var(--sys-color-primary);
-    display: inline-flex !important; /* stylelint-disable-line declaration-no-important */
-    align-items: center;
-    gap: 4px;
-    text-decoration-line: underline;
-  }
+  @scope (.insight-sources) {
+    :root {
+      padding: 0;
+      margin: 0;
+      box-sizing: border-box;
+      display: block;
+    }
 
-  devtools-icon {
-    height: 16px;
-    width: 16px;
-    margin-right: var(--sys-size-1);
-  }
+    ul {
+      color: var(--sys-color-primary);
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 18px;
+      margin-top: 8px;
+      padding-left: var(--sys-size-6);
+    }
 
-  devtools-icon[name="open-externally"] {
-    color: var(--icon-link);
-  }
+    li {
+      list-style-type: none;
+    }
 
-  .source-disclaimer {
-    color: var(--sys-color-on-surface-subtle);
+    ul .link {
+      color: var(--sys-color-primary);
+      display: inline-flex !important; /* stylelint-disable-line declaration-no-important */
+      align-items: center;
+      gap: 4px;
+      text-decoration-line: underline;
+    }
+
+    devtools-icon {
+      height: 16px;
+      width: 16px;
+      margin-right: var(--sys-size-1);
+    }
+
+    devtools-icon[name="open-externally"] {
+      color: var(--icon-link);
+    }
+
+    .source-disclaimer {
+      color: var(--sys-color-on-surface-subtle);
+    }
   }
 }