web/inc/logdog-styles/app-theme.html

<!--
  Copyright 2016 The LUCI Authors. All rights reserved.
  Use of this source code is governed under the Apache License, Version 2.0
  that can be found in the LICENSE file.
  -->

<style is="custom-style">
  /* Application theme */
  :root {
    --primary-text-color: #212121;
    --primary-background-color: #ffffff;
    --secondary-text-color: #737373;
    --disabled-text-color: #9b9b9b;
    --divider-color: #dbdbdb;
    --primary-color: #3f51b5;
    --light-primary-color: #c5cae9;
    --light-primary-alternate-color: #7986cb;
    --dark-primary-color: #303f9f;
    --accent-color: #ff4081;
    --light-accent-color: #ff80ab;
    --dark-accent-color: #f50057;
    /* Components */
    /* paper-drawer-panel */
    --drawer-menu-color: #ffffff;
    --drawer-border-color: 1px solid #ccc;
    --drawer-toolbar-border-color: 1px solid rgba(0, 0, 0, 0.22);
    /* paper-menu */
    --paper-menu-background-color: #fff;
    --menu-link-color: #111111;

    --nav-background-color: #ffecb3;
    --nav-item-color: #ffca28;
  }
  /* General styles */
  body {
    @apply(--layout-fullbleed);
    @apply(--layout-vertical);
  }
  .space {
    @apply(--layout-flex);
  }
  #drawerToolbar {
    color: var(--secondary-text-color);
    background-color: var(--drawer-menu-color);
    border-bottom: var(--drawer-toolbar-border-color);
  }
  #drawerToolbar .menu-name {
    @apply(--paper-font-title);
  }
  paper-scroll-header-panel {
    height: 100%;
  }
  paper-menu {
    --paper-menu-selected-item: {
      color: var(--primary-color);
    }
    --paper-menu-focused-item-after: {
      background: var(--primary-color);
    }
  }
  paper-menu iron-icon {
    margin-right: 33px;
    opacity: 0.54;
  }
  paper-menu a {
    @apply(--layout-horizontal);
    @apply(--layout-center);
    text-decoration: none;
    color: var(--menu-link-color);
    font-family: 'Roboto', 'Noto', sans-serif;
    text-rendering: optimizeLegibility;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    min-height: 48px;
    padding: 0 16px;
  }
  #mainToolbar.tall .app-name {
    font-size: 40px;
    font-weight: 300;
    /* Required for main area's paper-scroll-header-panel custom condensing transformation */
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
  #mainToolbar .middle-container,
  #mainToolbar .bottom-container {
    @apply(--layout-horizontal);
    @apply(--layout-center);
  }
  #mainToolbar .middle-container  {
    height: 100%;
    margin-left: 48px;
  }
  #mainToolbar:not(.tall) .middle-container {
    font-size: 18px;
    padding-bottom: 0;
  }
  #mainToolbar .bottom-container {
    @apply(--paper-font-subhead);
    margin-left: 48px;
    /* Required for main area's paper-scroll-header-panel custom condensing transformation */
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
  /* Height of the scroll area */
  .content {
    height: 900px;
  }
  section[data-route="home"] paper-material {
    @apply(--paper-font-body2);
  }
  section[data-route="home"] paper-material .subhead {
    @apply(--paper-font-subhead);
  }
  paper-material {
    border-radius: 2px;
    height: 100%;
    padding: 16px 0 16px 0;
    width: calc(98.66% - 16px);
    margin: 16px auto;
    background: white;
  }
  #toast .toast-hide-button {
    color: #eeff41;
    margin: 10px;
  }
  /* Breakpoints */
  /* Small */
  @media (max-width: 600px) {
    #drawer .paper-toolbar {
      margin-left: 16px;
    }
    #mainToolbar.tall .app-name {
      font-size: 24px;
      font-weight: 400;
    }
    paper-material {
      --menu-container-display: none;
      width: calc(97.33% - 32px);
      padding-left: 16px;
      padding-right: 16px;
    }
  }
  /* Tablet+ */
  @media (min-width: 601px) {
    #drawer.paper-drawer-panel > [drawer] {
      border-right: 1px solid rgba(0, 0, 0, 0.14);
    }
    iron-pages {
      padding: 48px 62px;
    }
    paper-material {
      width: calc(98% - 46px);
      margin-bottom: 32px;
      padding-left: 30px;
      padding-right: 30px;
    }
  }
  /* Material Design Adaptive Breakpoints */
  /*
    Below you'll find CSS media queries based on the breakpoint guidance
    published by the Material Design team. You can choose to use, customise
    or remove these breakpoints based on your needs.
    http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoints
   */
  /* mobile-small */
  @media all and (min-width: 0) and (max-width: 360px) and (orientation: portrait) { }
  /* mobile-large */
  @media all and (min-width: 361px) and (orientation: portrait) { }
  /* mobile-small-landscape */
  @media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape) { }
  /* mobile-large-landscape */
  @media all and (min-width: 481px) and (orientation: landscape) { }
  /* tablet-small-landscape */
  @media all and (min-width: 600px) and (max-width: 960px) and (orientation: landscape) { }
  /* tablet-large-landscape */
  @media all and (min-width: 961px) and (orientation: landscape) { }
  /* tablet-small */
  @media all and (min-width: 600px) and (orientation: portrait) { }
  /* tablet-large */
  @media all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) { }
  /* desktop-x-small-landscape */
  @media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape) { }
  /* desktop-x-small */
  @media all and (min-width: 0) and (max-width: 480px) and (max-aspect-ratio: 4/3) { }
  /* desktop-small-landscape */
  @media all and (min-width: 481px) and (max-width: 840px) and (orientation: landscape) { }
  /* desktop-small */
  @media all and (min-width: 481px) and (max-width: 840px) and (max-aspect-ratio: 4/3) { }
  /* desktop-medium-landscape */
  @media all and (min-width: 841px) and (max-width: 1280px) and (orientation: landscape) { }
  /* desktop-medium */
  @media all and (min-width: 841px) and (max-width: 1280px) and (max-aspect-ratio: 4/3) { }
  /* desktop-large */
  @media all and (min-width: 1281px) and (max-width: 1600px) { }
  /* desktop-xlarge */
  @media all and (min-width: 1601px) and (max-width: 1920px) { }
</style>