231 lines
6.7 KiB
HTML
231 lines
6.7 KiB
HTML
<!-- Palette generated by Material Palette - materialpalette.com/amber/blue-grey -->
|
|
<!-- Replace the one that comes in their starter kit -->
|
|
<!--
|
|
@license
|
|
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
-->
|
|
|
|
<style is="custom-style">
|
|
|
|
/*
|
|
Polymer includes a shim for CSS Custom Properties that we can use for application theming.
|
|
Below, you'll find the default palette for the Polymer Starter Kit layout. Feel free to play
|
|
with changing the colors used or generate your own palette of colours at MaterialPalette.com.
|
|
|
|
See https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details
|
|
for further information on custom CSS properties.
|
|
*/
|
|
|
|
/* Application theme */
|
|
|
|
:root {
|
|
--dark-primary-color: #FFA000;
|
|
--default-primary-color: #FFC107;
|
|
--light-primary-color: #FFECB3;
|
|
--text-primary-color: #FFFFFF;
|
|
--accent-color: #607D8B;
|
|
--primary-background-color: #FFECB3;
|
|
--primary-text-color: #212121;
|
|
--secondary-text-color: #727272;
|
|
--disabled-text-color: #BDBDBD;
|
|
--divider-color: #B6B6B6;
|
|
|
|
|
|
/* 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;
|
|
|
|
/* paper-input */
|
|
--paper-input-container-color: rgba(255, 255, 255, 0.64);
|
|
--paper-input-container-focus-color: rgba(255, 255, 255, 1);
|
|
--paper-input-container-input-color: #fff;
|
|
}
|
|
|
|
/* General styles */
|
|
|
|
#drawerToolbar {
|
|
color: var(--secondary-text-color);
|
|
background-color: var(--drawer-menu-color);
|
|
border-bottom: var(--drawer-toolbar-border-color);
|
|
}
|
|
|
|
paper-scroll-header-panel {
|
|
height: 100%;
|
|
}
|
|
|
|
paper-material {
|
|
border-radius: 2px;
|
|
height: 100%;
|
|
padding: 16px 0 16px 0;
|
|
width: calc(98.66% - 16px);
|
|
margin: 16px auto;
|
|
background: white;
|
|
}
|
|
|
|
paper-menu iron-icon {
|
|
margin-right: 33px;
|
|
opacity: 0.54;
|
|
}
|
|
|
|
.paper-menu > .iron-selected {
|
|
color: var(--default-primary-color);
|
|
}
|
|
|
|
paper-menu a {
|
|
text-decoration: none;
|
|
color: var(--menu-link-color);
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-ms-flex-direction: row;
|
|
-webkit-flex-direction: row;
|
|
flex-direction: row;
|
|
-ms-flex-align: center;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
font-family: 'Roboto', 'Noto', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
min-height: 48px;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
paper-toolbar.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 {
|
|
height: 100%;
|
|
margin-left: 48px;
|
|
}
|
|
|
|
#mainToolbar:not(.tall) .middle {
|
|
font-size: 18px;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
#mainToolbar .bottom {
|
|
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;
|
|
}
|
|
|
|
/* Breakpoints */
|
|
|
|
/* Small */
|
|
@media (max-width: 600px) {
|
|
|
|
paper-material {
|
|
--menu-container-display: none;
|
|
width: calc(97.33% - 32px);
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
paper-toolbar.tall .app-name {
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
#drawer .paper-toolbar {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
#overlay {
|
|
min-width: 360px;
|
|
}
|
|
|
|
.bg {
|
|
background: white;
|
|
}
|
|
|
|
}
|
|
|
|
/* Tablet+ */
|
|
@media (min-width: 601px) {
|
|
|
|
paper-material {
|
|
width: calc(98% - 46px);
|
|
margin-bottom: 32px;
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
}
|
|
|
|
#drawer.paper-drawer-panel > [drawer] {
|
|
border-right: 1px solid rgba(0, 0, 0, 0.14);
|
|
}
|
|
|
|
iron-pages {
|
|
padding: 48px 62px;
|
|
}
|
|
|
|
}
|
|
|
|
/* 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>
|