front_end/ui/infobar.css

/*
 * Copyright 2015 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

.infobar {
  color: rgb(34 34 34);
  display: flex;
  flex: auto;
  border-bottom: 1px solid rgb(171 171 171);
  flex-direction: column;
  position: relative;
  padding: 1px 6px 1px;
}

.infobar:focus {
  box-shadow: 0 0 0 2px rgb(0 0 0 / 20%) inset;
}

.infobar-warning {
  background-color: rgb(253 242 192);
}

.infobar-info,
.infobar-issue {
  background-color: rgb(255 255 255);
}

.infobar-main-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  min-height: 25px;
}

.infobar-info-container {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
}

.infobar-info-message {
  display: flex;
  margin: 5px 0;
}

.infobar-info-text {
  display: flex;
  align-items: center;
  margin: 0 4px;
}

.infobar-details-rows {
  padding: 5px 5px 0 5px;
}

.infobar-details-row {
  display: flex;
  flex-direction: column;
  line-height: 18px;
  padding-bottom: 6px;
}

.infobar-close-container {
  display: flex;
  flex-shrink: 0;
  align-items: center;
}

.infobar-close-container > .infobar-button.link-style {
  margin: 4px;
}

.infobar-button {
  color: #757575;
  cursor: pointer;
  padding: 0 4px;
}

.info-icon {
  -webkit-mask-image: url(Images/ic_info_black_18dp.svg);
  background-color: hsl(214deg 92% 50%);
}

.warning-icon {
  -webkit-mask-image: url(Images/ic_warning_black_18dp.svg);
  background-color: hsl(44deg 92% 50%);
}

.issue-icon {
  -webkit-mask-image: url(Images/issue-text-icon.svg);
  background-color: #1a73e8;
}

.icon {
  -webkit-mask-size: 18px 18px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* .infobar-issue style overrides to mimic console messages. */

.infobar.infobar-issue {
  border: none;
  color: rgb(48 57 66);
  padding-top: 3px;
  line-height: 1.2;
  background-color: transparent;
}

.infobar.infobar-issue .infobar-info-text {
  margin: 0 7px;
}

.infobar.infobar-issue .infobar-main-row {
  flex-direction: row;
  min-height: 17px;
}

.infobar.infobar-issue .infobar-close-container {
  display: none;
}

.infobar.infobar-issue .infobar-button {
  padding: 0 22px 0 0;
  border: none;
  text-decoration: underline;
  margin: 0;
  height: auto;
  font-size: inherit;
  color: rgb(33% 33% 33%);
  background-color: transparent;
}

.infobar.infobar-issue .infobar-button:hover {
  color: rgb(15% 15% 15%);
  background-color: transparent;
  box-shadow: none;
}

.infobar.infobar-issue .infobar-button:focus {
  color: rgb(33% 33% 33%);
  background-color: transparent;
  box-shadow: none;
  outline-width: unset;
}

.infobar.infobar-issue .icon {
  margin-top: 1px;
}

.infobar.infobar-issue .infobar-info-message {
  flex: 1 0;
  margin: 0 1px;
}

.infobar.infobar-issue:focus {
  box-shadow: none;
}