dashboard.css in Devel 8

/* 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 */