dashboard.css in Devel 8.3

/* base themes */
#webrofiler {
  overflow: hidden;
  font-size: 1em;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.7);
  background-color: #ffffff;
}
#webrofiler * {
  box-sizing: border-box;
}

#webprofiler {
  /*

  overview example

  <ul class="overview__list">
    <li>
      <a class="overview__link">
        <img class="overview__icon" src="data:">
        <span class="overview__title">
        <span class="overview__subtitle">


  */
  /*

  general element template

  will be implemented in the next dashboard relase

  this HTML will contain the preview of any single card present inside the dashboard

  <a class="ui--[red||pink||purple||deepPurple||indigo||blue||lightBlue||cyan||teal||green||lightGreen||lime||yellow||amber||orange||deepOrange||brown||gray||blueGray] app l-card">

    <div class="app__bar">
      <h3 class="app__title">
      <img class="app__icon" src="data:">

    <div class="app__container">
      <div class="app__main-data"> text
      <div class="app__secondary-data"> text

  */ }
#webprofiler .tabs:after,
#webprofiler .tabs__tabs:after,
#webprofiler .tabs__panels:after,
#webprofiler .tabs__panel:after,
#webprofiler .resume:after,
#webprofiler .collectors:after,
#webprofiler .panel:after,
#webprofiler .panel__toolbar:after,
#webprofiler .panel__container:after,
#webprofiler .panel__expand-header:after,
#webprofiler .panel__expand-content:after,
#webprofiler .app__bar:after,
#webprofiler .app__container:after,
#webprofiler .modal__bar:after,
#webprofiler .modal__content:after {
  content: ' ';
  display: block;
  clear: both;
}
#webprofiler .panel__container,
#webprofiler .ui--red,
#webprofiler .ui--pink,
#webprofiler .ui--purple,
#webprofiler .ui--deepPurple,
#webprofiler .ui--indigo,
#webprofiler .ui--blue,
#webprofiler .ui--lightBlue,
#webprofiler .ui--cyan,
#webprofiler .ui--teal,
#webprofiler .ui--green,
#webprofiler .ui--lightGreen,
#webprofiler .ui--lime,
#webprofiler .ui--yellow,
#webprofiler .ui--amber,
#webprofiler .ui--orange,
#webprofiler .ui--deepOrange,
#webprofiler .ui--brown,
#webprofiler .ui--gray,
#webprofiler .ui--blueGray,
#webprofiler .modal__container {
  box-shadow: 0 2px 4px -2px #000000;
  margin-bottom: 40px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
  overflow: hidden;
}
#webprofiler .ui--red .app__title,
#webprofiler .ui--pink .app__title,
#webprofiler .ui--purple .app__title,
#webprofiler .ui--deepPurple .app__title,
#webprofiler .ui--blue .app__title,
#webprofiler .ui--lightBlue .app__title,
#webprofiler .ui--cyan .app__title,
#webprofiler .ui--green .app__title,
#webprofiler .ui--lightGreen .app__title,
#webprofiler .ui--lime .app__title,
#webprofiler .ui--yellow .app__title,
#webprofiler .ui--amber .app__title,
#webprofiler .ui--orange .app__title,
#webprofiler .ui--deepOrange .app__title,
#webprofiler .ui--brown .app__title {
  color: white;
}
#webprofiler .ui--indigo .app__title,
#webprofiler .ui--teal .app__title,
#webprofiler .ui--gray .app__title,
#webprofiler .ui--blueGray .app__title,
#webprofiler .modal__title {
  color: rgba(0, 0, 0, 0.87);
}
#webprofiler .ui--red .app__main-data,
#webprofiler .ui--pink .app__main-data,
#webprofiler .ui--purple .app__main-data,
#webprofiler .ui--deepPurple .app__main-data,
#webprofiler .ui--indigo .app__main-data,
#webprofiler .ui--blue .app__main-data,
#webprofiler .ui--lightBlue .app__main-data,
#webprofiler .ui--cyan .app__main-data,
#webprofiler .ui--teal .app__main-data,
#webprofiler .ui--green .app__main-data,
#webprofiler .ui--lightGreen .app__main-data,
#webprofiler .ui--lime .app__main-data,
#webprofiler .ui--yellow .app__main-data,
#webprofiler .ui--amber .app__main-data,
#webprofiler .ui--orange .app__main-data,
#webprofiler .ui--deepOrange .app__main-data,
#webprofiler .ui--brown .app__main-data,
#webprofiler .ui--gray .app__main-data,
#webprofiler .ui--blueGray .app__main-data,
#webprofiler .modal__content {
  color: rgba(0, 0, 0, 0.7);
}
#webprofiler .ui--red .app__secondary-data,
#webprofiler .ui--pink .app__secondary-data,
#webprofiler .ui--purple .app__secondary-data,
#webprofiler .ui--deepPurple .app__secondary-data,
#webprofiler .ui--indigo .app__secondary-data,
#webprofiler .ui--blue .app__secondary-data,
#webprofiler .ui--lightBlue .app__secondary-data,
#webprofiler .ui--cyan .app__secondary-data,
#webprofiler .ui--teal .app__secondary-data,
#webprofiler .ui--green .app__secondary-data,
#webprofiler .ui--lightGreen .app__secondary-data,
#webprofiler .ui--lime .app__secondary-data,
#webprofiler .ui--yellow .app__secondary-data,
#webprofiler .ui--amber .app__secondary-data,
#webprofiler .ui--orange .app__secondary-data,
#webprofiler .ui--deepOrange .app__secondary-data,
#webprofiler .ui--brown .app__secondary-data,
#webprofiler .ui--gray .app__secondary-data,
#webprofiler .ui--blueGray .app__secondary-data {
  color: rgba(0, 0, 0, 0.3);
}
#webprofiler a {
  color: #2979ff;
}
#webprofiler a:hover {
  color: #2962ff;
  text-decoration: none;
}
#webprofiler .list--unstyled {
  margin: 0;
  list-style-type: none;
  padding: 0;
}
#webprofiler .list--unstyled > li {
  display: block;
  padding: 0 8px;
}
#webprofiler .list--inline {
  margin: 0;
  list-style-type: none;
  padding: 0;
}
#webprofiler .list--inline > li {
  display: inline-block;
  padding: 8px;
}
#webprofiler .list--level-0 li {
  padding: 0 0 0 0;
}
#webprofiler .list--level-1 li {
  padding: 0 0 0 8px;
}
#webprofiler .list--level-3 li {
  padding: 0 0 0 16px;
}
#webprofiler pre {
  padding: 16px;
}
#webprofiler pre,
#webprofiler code {
  white-space: normal;
  word-break: break-all;
  word-break: break-word;
  font-size: 14px;
  background-color: #f5f5f5;
}
#webprofiler .list-item--bold {
  font-weight: bold;
}
#webprofiler code.code--json {
  white-space: pre-wrap;
}
#webprofiler thead {
  white-space: nowrap;
}
#webprofiler thead th {
  background-color: transparent;
}
#webprofiler th {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.54);
  border: none;
}
#webprofiler td {
  word-break: break-all;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.87);
}
#webprofiler tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}
#webprofiler tr:hover {
  background-color: #eeeeee;
}
#webprofiler td,
#webprofiler th {
  padding: 16px 24px;
  min-height: 46px;
  text-transform: none;
  vertical-align: top;
}
#webprofiler .table--compact {
  table-layout: fixed;
}
#webprofiler .table--compact td,
#webprofiler .table--compact th {
  word-spacing: 99em;
}
#webprofiler .table--fixed {
  table-layout: fixed;
}
#webprofiler .table--duo th:first-child,
#webprofiler .table--duo td:first-child {
  width: 35%;
}
#webprofiler .table--trio th:first-child,
#webprofiler .table--trio td:first-child {
  width: 80%;
}
#webprofiler .table--trio th:nth-child(2),
#webprofiler .table--trio td:nth-child(2),
#webprofiler .table--trio th:nth-child(3),
#webprofiler .table--trio td:nth-child(3) {
  width: 10%;
}
#webprofiler [class*="button"] {
  display: block;
  color: #2979ff;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
  border: none;
  text-transform: uppercase;
  font-size: 16px;
  text-align: center;
  padding: 16px;
  margin: 8px;
  cursor: pointer;
  min-width: 42px;
}
#webprofiler .button--flat {
  background-color: transparent;
}
#webprofiler .button--flat:hover {
  background-color: #eeeeee;
}
#webprofiler .button--flat:active,
#webprofiler .button--flat:focus {
  background-color: #bdbdbd;
}
#webprofiler .tabs {
  position: relative;
  margin: -16px 0 16px 0;
}
#webprofiler .tabs a {
  display: inline;
}
#webprofiler .tabs__radio {
  display: none;
}
#webprofiler .tabs__tabs {
  margin: 0 -16px 16px -16px;
  text-transform: uppercase;
  height: 48px;
  background-color: #f5f5f5;
}
#webprofiler .tabs__tabs > li {
  padding: 0;
}
#webprofiler .tabs__label {
  border-bottom: 5px solid transparent;
  text-align: center;
  line-height: 48px;
  min-width: 160px;
  display: inline-block;
  margin: -5px 0 0 0;
}
#webprofiler .tabs__panel {
  display: none;
  width: 100%;
}
#webprofiler .tabs__radio:checked:nth-child(1) ~ .tabs__panels .tabs__panel:nth-child(1) {
  display: block;
}
#webprofiler .tabs__radio:checked:nth-child(2) ~ .tabs__panels .tabs__panel:nth-child(2) {
  display: block;
}
#webprofiler .tabs__radio:checked:nth-child(3) ~ .tabs__panels .tabs__panel:nth-child(3) {
  display: block;
}
#webprofiler .tabs__radio:checked:nth-child(1) ~ .tabs__tabs li:nth-child(1) .tabs__label {
  border-bottom-color: #2962ff;
}
#webprofiler .tabs__radio:checked:nth-child(2) ~ .tabs__tabs li:nth-child(2) .tabs__label {
  border-bottom-color: #2962ff;
}
#webprofiler .tabs__radio:checked:nth-child(3) ~ .tabs__tabs li:nth-child(3) .tabs__label {
  border-bottom-color: #2962ff;
}
#webprofiler .overview {
  display: table-cell;
  width: 20%;
  vertical-align: top;
  font-size: 1.2em;
  line-height: 2em;
  background: #ffffff;
}
#webprofiler .overview__list {
  padding: 0;
  margin: -1px -1px 0 0;
  list-style-type: none;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
}
#webprofiler .overview__link {
  position: relative;
  display: block;
  padding: 0 0 0 72px;
  border-right: 5px solid transparent;
}
#webprofiler .overview__link:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  right: -5px;
  left: 72px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}
#webprofiler .overview__icon {
  position: absolute;
  top: 16px;
  left: 16px;
}
#webprofiler .overview__title {
  display: block;
  font-size: 16px;
  line-height: 22px;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-right: 11px;
}
#webprofiler .overview__subtitle {
  display: block;
  font-size: 14px;
  line-height: 20px;
  padding-bottom: 16px;
  padding-right: 11px;
  margin-top: -16px;
}
#webprofiler .is--selected .overview__link {
  color: #000000;
  background-color: #f5f5f5;
  border-right-color: #2962ff;
}
#webprofiler .overview__link:hover {
  color: #000000;
  background-color: #82b1ff;
}
#webprofiler .resume {
  position: relative;
  background-color: #e0e0e0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  border-left: 1px solid rgba(0, 0, 0, 0.18);
  padding: 16px 16px 0 16px;
  margin-left: 20%;
}
#webprofiler .resume__title {
  display: block;
  font-size: 24px;
  line-height: 32px;
}
#webprofiler .resume__subtitle,
#webprofiler .resume__time {
  display: block;
  font-size: 16px;
  line-height: 24px;
}
#webprofiler .resume__time {
  margin-bottom: 52px;
}
#webprofiler .resume__button {
  position: absolute;
  bottom: 0;
  right: 16px;
}
#webprofiler .collectors {
  display: table;
  width: 100%;
}
#webprofiler .details {
  display: table-cell;
  overflow: hidden;
  padding: 16px;
  border-left: 1px solid rgba(0, 0, 0, 0.18);
}
#webprofiler .details__title {
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}
#webprofiler .details svg {
  max-width: 100%;
}
#webprofiler [class*='panel__filter--'] {
  display: inline-block;
  padding: 32px 16px 0 16px;
  position: relative;
}
#webprofiler .panel {
  margin: 0 0 20px;
  padding: 0;
  background: #fafafa;
  border: none;
}
#webprofiler .panel select,
#webprofiler .panel input[type="text"] {
  min-width: 165px;
  font-size: 16px;
  background-color: #fafafa;
  border-color: transparent;
  border-width: 0;
  border-bottom: 2px solid #ffffff;
  padding: 8px 0;
  margin-bottom: 8px;
}
#webprofiler .panel select:focus,
#webprofiler .panel input[type="text"]:focus {
  outline: none;
  border-bottom-color: #2979ff;
}
#webprofiler .panel select:focus + label,
#webprofiler .panel input[type="text"]:focus + label {
  color: #2979ff;
}
#webprofiler .panel select {
  min-width: 165px;
  padding-right: 24px;
  border-radius: 0;
  background: url(../../images/caret-down.svg) no-repeat 99% 63%;
  -moz-appearance: none;
}
#webprofiler .panel select:hover {
  box-shadow: none;
}
#webprofiler .panel__title {
  font-size: 24px;
  line-height: 1;
  background-color: #f5f5f5;
  text-transform: none;
  padding: 16px;
  margin: -16px -16px 16px -16px;
}
#webprofiler .panel__toolbar {
  background-color: #fafafa;
  margin: -16px -16px 16px -16px;
}
#webprofiler .panel__filter-action {
  display: inline-block;
}
#webprofiler .panel__filter-label {
  display: block;
  position: absolute;
  top: 0;
  margin-top: 16px;
}
#webprofiler .panel__container {
  background-color: #ffffff;
  position: relative;
  padding: 16px;
}
#webprofiler .panel__expand-content {
  display: none;
}
#webprofiler .is--open .panel__expand-content {
  display: block;
}
#webprofiler .is--hightlighted {
  border-right: 10px solid #aa00ff;
  padding-right: 6px;
}
#webprofiler .is--hidden {
  display: none;
}
#webprofiler .app {
  overflow: hidden;
  position: relative;
  display: block;
  cursor: pointer;
}
#webprofiler .app__bar {
  padding: 16px;
}
#webprofiler .app__title {
  margin: 8px 32px 0 0;
  font-weight: normal;
}
#webprofiler .app__icon {
  float: right;
  height: 32px;
  width: 32px;
}
#webprofiler .app__container {
  padding: 16px;
}
#webprofiler .app__main-data {
  font-size: 24px;
  padding-bottom: 16px;
}
#webprofiler .app__secondary-data {
  font-size: 14px;
  padding-bottom: 16px;
  margin-top: -8px;
}
#webprofiler .ui--red .app__bar {
  background-color: #ff1744;
}
#webprofiler .ui--red .app__container {
  background-color: #ff8a80;
}
#webprofiler .ui--pink .app__bar {
  background-color: #f50057;
}
#webprofiler .ui--pink .app__container {
  background-color: #ff80ab;
}
#webprofiler .ui--purple .app__bar {
  background-color: #d500f9;
}
#webprofiler .ui--purple .app__container {
  background-color: #ea80fc;
}
#webprofiler .ui--deepPurple .app__bar {
  background-color: #651fff;
}
#webprofiler .ui--deepPurple .app__container {
  background-color: #b388ff;
}
#webprofiler .ui--indigo .app__bar {
  background-color: #3d5afe;
}
#webprofiler .ui--indigo .app__container {
  background-color: #8c9eff;
}
#webprofiler .ui--blue .app__bar {
  background-color: #2979ff;
}
#webprofiler .ui--blue .app__container {
  background-color: #82b1ff;
}
#webprofiler .ui--lightBlue .app__bar {
  background-color: #00b0ff;
}
#webprofiler .ui--lightBlue .app__container {
  background-color: #80d8ff;
}
#webprofiler .ui--cyan .app__bar {
  background-color: #00e5ff;
}
#webprofiler .ui--cyan .app__container {
  background-color: #84ffff;
}
#webprofiler .ui--teal .app__bar {
  background-color: #ade9b6;
}
#webprofiler .ui--teal .app__container {
  background-color: #a7ffeb;
}
#webprofiler .ui--green .app__bar {
  background-color: #00e676;
}
#webprofiler .ui--green .app__container {
  background-color: #b9f6ca;
}
#webprofiler .ui--lightGreen .app__bar {
  background-color: #76ff03;
}
#webprofiler .ui--lightGreen .app__container {
  background-color: #ccff90;
}
#webprofiler .ui--lime .app__bar {
  background-color: #c6ff00;
}
#webprofiler .ui--lime .app__container {
  background-color: #f4ff81;
}
#webprofiler .ui--yellow .app__bar {
  background-color: #ffea00;
}
#webprofiler .ui--yellow .app__container {
  background-color: #ffff8d;
}
#webprofiler .ui--amber .app__bar {
  background-color: #ffc400;
}
#webprofiler .ui--amber .app__container {
  background-color: #ffe57f;
}
#webprofiler .ui--orange .app__bar {
  background-color: #ff9100;
}
#webprofiler .ui--orange .app__container {
  background-color: #ffd180;
}
#webprofiler .ui--deepOrange .app__bar {
  background-color: #ff3d00;
}
#webprofiler .ui--deepOrange .app__container {
  background-color: #ff9e80;
}
#webprofiler .ui--brown .app__bar {
  background-color: #8d6e63;
}
#webprofiler .ui--brown .app__container {
  background-color: #d7ccc8;
}
#webprofiler .ui--gray .app__bar {
  background-color: #bdbdbd;
}
#webprofiler .ui--gray .app__container {
  background-color: #f5f5f5;
}
#webprofiler .ui--blueGray .app__bar {
  background-color: #bdbdbd;
}
#webprofiler .ui--blueGray .app__container {
  background-color: #f5f5f5;
}
#webprofiler .loader--fixed {
  position: fixed;
  right: 0;
  top: 50%;
  width: 80%;
  height: 100px;
  zoom: 1.7;
  text-align: center;
}
#webprofiler .loader__circle {
  animation: rotate 2s linear infinite;
  height: 100px;
  position: relative;
  width: 100px;
}
#webprofiler .loader__path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
} }
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
}
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
}
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
} }
@keyframes color {
  100%,
  0% {
    stroke: #ff1744;
}
  40% {
    stroke: #2979ff;
}
  66% {
    stroke: #00e676;
}
  80%,
  90% {
    stroke: #ffea00;
} }
#webprofiler .loader--linear {
  height: 3px;
  background-color: #ffea00;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
#webprofiler .loader__bar {
  content: "";
  display: inline;
  position: absolute;
  width: 0;
  height: 100%;
  left: 50%;
  text-align: center;
}
#webprofiler .loader__bar:nth-child(1) {
  background-color: #ff1744;
  animation: loading 3s linear infinite;
}
#webprofiler .loader__bar:nth-child(2) {
  background-color: #2979ff;
  animation: loading 3s linear 1s infinite;
}
#webprofiler .loader__bar:nth-child(3) {
  background-color: #00e676;
  animation: loading 3s linear 2s infinite;
}
@keyframes loading {
  from {
    left: 50%;
    width: 0;
    z-index: 100;
}
  33.3333% {
    left: 0;
    width: 100%;
    z-index: 10;
}
  to {
    left: 0;
    width: 100%;
} }
#webprofiler .modal {
  background-color: rgba(0, 0, 0, 0.87);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#webprofiler .modal__container {
  border-top-right-radius: 2px;
  border-top-left-radius: 2px;
  box-shadow: 0 2px 4px -2px #000000;
  background-color: #ffffff;
  position: relative;
  width: 33%;
  min-width: 350px;
  margin: 0 auto;
  margin-top: 15%;
}
#webprofiler .modal__bar {
  padding: 16px;
}
#webprofiler .modal__content {
  padding: 16px;
  font-size: 14px;
}
#webprofiler .modal__title {
  margin: 8px 32px 0 0;
  font-weight: normal;
  font-size: 24px;
}
#webprofiler .modal__main-data {
  font-size: 24px;
  padding-bottom: 16px;
}
#webprofiler .modal textarea {
  white-space: normal;
  word-break: break-all;
  word-break: break-word;
  font-size: 14px;
  background-color: #f5f5f5;
  max-width: 100%;
  height: 320px;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  border: none;
}
#webprofiler .t--heading,
#webprofiler .tabs__radio:checked:nth-child(1) ~ .tabs__tabs li:nth-child(1) .tabs__label,
#webprofiler .tabs__radio:checked:nth-child(2) ~ .tabs__tabs li:nth-child(2) .tabs__label,
#webprofiler .tabs__radio:checked:nth-child(3) ~ .tabs__tabs li:nth-child(3) .tabs__label,
#webprofiler .overview__title,
#webprofiler .resume__title,
#webprofiler .panel select,
#webprofiler .panel input[type="text"],
#webprofiler .panel__title {
  color: black;
}
#webprofiler .t--notice,
#webprofiler .tabs__label,
#webprofiler .overview__subtitle,
#webprofiler .resume__subtitle,
#webprofiler .resume__time,
#webprofiler .panel__filter-label {
  color: rgba(0, 0, 0, 0.3);
}
#webprofiler .l-card {
  width: 32%;
  margin-left: 1%;
  margin-right: 1%;
  float: left;
}
#webprofiler .l-card:nth-child(3n + 1) {
  margin-left: 0;
}
#webprofiler .l-card:nth-child(3n) {
  margin-right: 0;
}
#webprofiler .l-left {
  float: left;
}
#webprofiler .l-right {
  float: right;
}
#webprofiler .h--word-broken {
  word-break: break-all;
}
#webprofiler .h--word-intact {
  word-break: normal;
}

/*# sourceMappingURL=dashboard.css.map */