[Minor] Styling updates
This commit is contained in:
parent
b27b5f02d7
commit
ea53c88fd9
GPG Key ID:
75DB9C85C74331F7
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "strolch-wc-styles",
|
"name": "strolch-wc-styles",
|
||||||
"description": "Strolch WebComponent Styles",
|
"description": "Strolch WebComponent Styles",
|
||||||
"version": "0.4.1",
|
"version": "0.4.2",
|
||||||
"authors": ["Robert von Burg"],
|
"authors": ["Robert von Burg"],
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"strolch",
|
"strolch",
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,8 @@
|
||||||
--column-side-padding: 12px;
|
--column-side-padding: 12px;
|
||||||
|
|
||||||
/* primary colors */
|
/* primary colors */
|
||||||
|
--primary-color: #9965F4;
|
||||||
|
--secondary-color: #616161;
|
||||||
--app-primary-color: #9965F4;
|
--app-primary-color: #9965F4;
|
||||||
--app-secondary-color: #616161;
|
--app-secondary-color: #616161;
|
||||||
|
|
||||||
|
|
@ -34,9 +36,9 @@
|
||||||
--app-light-highlight-fg-color: black;
|
--app-light-highlight-fg-color: black;
|
||||||
--app-light-highlight-bg-color: #c5cae9;
|
--app-light-highlight-bg-color: #c5cae9;
|
||||||
--app-regular-highlight-fg-color: white;
|
--app-regular-highlight-fg-color: white;
|
||||||
--app-regular-highlight-bg-color: #9fa8da;
|
--app-regular-highlight-bg-color: #5c6bc0;
|
||||||
--app-dark-highlight-fg-color: white;
|
--app-dark-highlight-fg-color: white;
|
||||||
--app-dark-highlight-bg-color: #5c6bc0;
|
--app-dark-highlight-bg-color: #1a237e;
|
||||||
|
|
||||||
/* warning colors */
|
/* warning colors */
|
||||||
--app-light-warning-fg-color: white;
|
--app-light-warning-fg-color: white;
|
||||||
|
|
@ -62,16 +64,23 @@
|
||||||
--app-dark-decent-fg-color: black;
|
--app-dark-decent-fg-color: black;
|
||||||
--app-dark-decent-bg-color: #e0e0e0; /*var(--paper-grey-300);*/
|
--app-dark-decent-bg-color: #e0e0e0; /*var(--paper-grey-300);*/
|
||||||
|
|
||||||
--paper-toolbar-background: var(--app-dark-highlight-bg-color);
|
--disabled-fg-color: #9e9e9e;
|
||||||
--paper-dialog-button-color: var(--app-dark-highlight-bg-color);
|
--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 {
|
app-toolbar {
|
||||||
background-color: var(--app-dark-highlight-bg-color);
|
background-color: var(--primary-color);
|
||||||
color: var(--app-regular-highlight-fg-color);
|
color: var(--app-regular-highlight-fg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
app-drawer {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
paper-menu {
|
paper-menu {
|
||||||
--paper-menu-selected-item: {
|
--paper-menu-selected-item: {
|
||||||
background-color: var(--app-light-highlight-bg-color);
|
background-color: var(--app-light-highlight-bg-color);
|
||||||
|
|
@ -81,12 +90,12 @@
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
paper-menu paper-item:hover {
|
paper-menu paper-item {
|
||||||
background-color: var(--app-regular-highlight-bg-color);
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
paper-menu paper-item:hover {
|
||||||
color: var(--app-primary-color);
|
background-color: var(--app-regular-highlight-bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
|
|
@ -94,14 +103,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
paper-material {
|
paper-material {
|
||||||
background: white;
|
background-color: var(--paper-material-bg-color);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
paper-card {
|
paper-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: white;
|
background-color: var(--paper-card-bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
paper-card .header {
|
paper-card .header {
|
||||||
|
|
@ -111,18 +120,16 @@
|
||||||
paper-toggle-button {
|
paper-toggle-button {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
--paper-toggle-button-checked-button-color: var(--app-primary-color);
|
--paper-toggle-button-checked-button-color: var(--app-dark-highlight-bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
paper-button {
|
paper-button {
|
||||||
background: var(--app-dark-highlight-fg-color);
|
background-color: var(--app-dark-highlight-fg-color);
|
||||||
color: var(--app-light-highlight-fg-color);
|
|
||||||
height: 35px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
paper-button[disabled] {
|
paper-button[disabled] {
|
||||||
background: #eeeeee;
|
background-color: var(--disabled-bg-color);
|
||||||
color: #9e9e9e;
|
color: var(--disabled-fg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
paper-checkbox {
|
paper-checkbox {
|
||||||
|
|
@ -144,10 +151,6 @@
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
padding: var(--app-pages-content-padding);
|
padding: var(--app-pages-content-padding);
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
|
|
@ -233,7 +236,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.data:nth-child(even) {
|
.data:nth-child(even) {
|
||||||
background: #f1eeee;
|
background-color: var(--row-even-bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-heading {
|
.table-heading {
|
||||||
|
|
@ -254,9 +257,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected {
|
.selected {
|
||||||
background: #e7e7e7;
|
background-color: var(--selected-bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</template>
|
</template>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
Loading…
Reference in New Issue