285 lines
8.8 KiB
HTML
285 lines
8.8 KiB
HTML
<link rel="import" href="../polymer/polymer.html">
|
|
|
|
<link rel="import" href="../paper-styles/paper-styles.html">
|
|
|
|
<link rel="import" href="./strolch-wc-styles.html">
|
|
|
|
<dom-module id="strolch-wc-app-style">
|
|
<template>
|
|
<style is="strolch-wc-app-style" include="strolch-wc-styles">
|
|
:root {
|
|
|
|
/* dimensions of this app */
|
|
--app-width: 100%;
|
|
--app-max-width: 2000px;
|
|
--app-min-width: inherit;
|
|
|
|
/* dimensions of the header */
|
|
--app-header-height: 64px;
|
|
--app-drawer-height: calc(100vh - var(--app-header-height));
|
|
--app-notification-height: 48px;
|
|
|
|
/* dimensions of the pages */
|
|
--app-pages-content-padding: 24px;
|
|
|
|
/* additional dimensions */
|
|
--app-font-size: 14px;
|
|
--column-min-width: 80px;
|
|
--column-side-padding: 12px;
|
|
|
|
/* primary colors */
|
|
--primary-color: #9965F4;
|
|
--secondary-color: #616161;
|
|
--app-primary-color: #9965F4;
|
|
--app-secondary-color: #616161;
|
|
--primary-text-color: #212121;
|
|
--secondary-text-color: #737373;
|
|
|
|
/* highlight colors */
|
|
--app-light-highlight-fg-color: black;
|
|
--app-light-highlight-bg-color: #c5cae9;
|
|
--app-regular-highlight-fg-color: white;
|
|
--app-regular-highlight-bg-color: #5c6bc0;
|
|
--app-dark-highlight-fg-color: white;
|
|
--app-dark-highlight-bg-color: #1a237e;
|
|
|
|
/* warning colors */
|
|
--app-light-warning-fg-color: white;
|
|
--app-light-warning-bg-color: #ef9a9a; /*var(--paper-red-200);*/
|
|
--app-regular-warning-fg-color: white;
|
|
--app-regular-warning-bg-color: #d32f2f; /*var(--paper-red-700);*/
|
|
--app-dark-warning-fg-color: white;
|
|
--app-dark-warning-bg-color: #b71c1c; /*var(--paper-red-700);*/
|
|
|
|
/* warning colors */
|
|
--app-light-warning2-fg-color: white;
|
|
--app-light-warning2-bg-color: #ffecb3; /*var(--paper-amber-100);*/
|
|
--app-regular-warning2-fg-color: white;
|
|
--app-regular-warning2-bg-color: #ffe082; /*var(--paper-amber-200);*/
|
|
--app-dark-warning2-fg-color: white;
|
|
--app-dark-warning2-bg-color: #ffa000; /*var(--paper-amber-700); */
|
|
|
|
/* decent colors */
|
|
--app-light-decent-fg-color: black;
|
|
--app-light-decent-bg-color: #f5f5f5; /*var(--paper-grey-100);*/
|
|
--app-regular-decent-fg-color: black;
|
|
--app-regular-decent-bg-color: #eeeeee; /*var(--paper-grey-200); */
|
|
--app-dark-decent-fg-color: black;
|
|
--app-dark-decent-bg-color: #e0e0e0; /*var(--paper-grey-300);*/
|
|
|
|
--disabled-fg-color: #9e9e9e;
|
|
--disabled-bg-color: #eeeeee;
|
|
--selected-bg-color: #e7e7e7;
|
|
--row-even-bg-color: #f1eeee;
|
|
--paper-card-bg-color: #ffffff;
|
|
--paper-material-bg-color: #ffffff;
|
|
}
|
|
|
|
app-toolbar {
|
|
background-color: var(--primary-color);
|
|
color: var(--app-regular-highlight-fg-color);
|
|
}
|
|
|
|
app-toolbar > paper-button {
|
|
font-size: var(--app-font-size, 14px);
|
|
color: var(--primary-text-color);
|
|
}
|
|
|
|
app-drawer {
|
|
z-index: 10;
|
|
}
|
|
|
|
paper-tabs {
|
|
--paper-tabs-selection-bar-color: var(--app-regular-highlight-bg-color);
|
|
}
|
|
|
|
paper-menu {
|
|
--paper-menu-selected-item: {
|
|
background-color: var(--app-light-highlight-bg-color);
|
|
};
|
|
--paper-menu-focused-item: {
|
|
background-color: var(--app-regular-highlight-bg-color);
|
|
};
|
|
}
|
|
|
|
paper-menu paper-item {
|
|
cursor: pointer;
|
|
}
|
|
|
|
paper-menu paper-item:hover {
|
|
background-color: var(--app-regular-highlight-bg-color);
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
paper-material {
|
|
background-color: var(--paper-material-bg-color);
|
|
padding: 10px;
|
|
margin: 10px;
|
|
}
|
|
|
|
paper-card {
|
|
width: 100%;
|
|
background-color: var(--paper-card-bg-color);
|
|
}
|
|
|
|
paper-card .header {
|
|
margin: 10px;
|
|
}
|
|
|
|
paper-toggle-button {
|
|
margin-left: 10px;
|
|
margin-right: 5px;
|
|
--paper-toggle-button-checked-button-color: var(--app-dark-highlight-bg-color);
|
|
}
|
|
|
|
paper-radio-button {
|
|
--paper-radio-button-checked-color: var(--app-dark-highlight-bg-color);
|
|
}
|
|
|
|
paper-button {
|
|
background-color: var(--app-dark-highlight-fg-color);
|
|
}
|
|
|
|
paper-button[disabled] {
|
|
background-color: var(--disabled-bg-color);
|
|
color: var(--disabled-fg-color);
|
|
}
|
|
|
|
paper-checkbox {
|
|
padding: 8px;
|
|
}
|
|
|
|
paper-input.readonly {
|
|
--paper-input-container: {
|
|
padding: 4px 0;
|
|
};
|
|
--paper-input-container-underline: {
|
|
display: none;
|
|
};
|
|
--paper-input-container-underline-focus: {
|
|
display: none;
|
|
};
|
|
--paper-input-container-underline-disabled: {
|
|
display: none;
|
|
};
|
|
}
|
|
|
|
paper-toast paper-button {
|
|
background-color: var(--app-dark-highlight-fg-color);
|
|
color: var(--app-light-highlight-fg-color);
|
|
}
|
|
|
|
.content {
|
|
padding: var(--app-pages-content-padding);
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.actions paper-button {
|
|
margin: 0;
|
|
}
|
|
|
|
.actions paper-button:not(:first-child) {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.actions.padding {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.actions div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.actions-right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.actions-center {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
.actions p {
|
|
padding: 0;
|
|
margin: 0;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.actions-left paper-button,
|
|
.actions-left paper-icon-button,
|
|
.actions-left paper-toggle-button {
|
|
margin-left: 0;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.actions-right paper-button,
|
|
.actions-left paper-icon-button,
|
|
.actions-right paper-toggle-button {
|
|
margin-right: 0;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.actions-right *:last-child {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.actions-left *:first-child {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
|
|
.table {
|
|
min-width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.table-row {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
.data:nth-child(even) {
|
|
background-color: var(--row-even-bg-color);
|
|
}
|
|
|
|
.table-heading {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.table-heading,
|
|
.table-cell {
|
|
display: flex;
|
|
padding: 0 var(--column-side-padding);
|
|
overflow: hidden;
|
|
align-items: center;
|
|
flex-basis: var(--column-min-width);
|
|
flex-grow: 1;
|
|
flex-shrink: 0;
|
|
justify-content: flex-start;
|
|
min-height: 48px;
|
|
}
|
|
|
|
.selected {
|
|
background-color: var(--selected-bg-color);
|
|
}
|
|
</style>
|
|
</template>
|
|
</dom-module> |