From aa405b35403756c6d02820f9e6622b3c0313b707 Mon Sep 17 00:00:00 2001 From: Oliver Hamlet Date: Sat, 2 Jul 2016 09:54:19 +0100 Subject: [PATCH] Update to Polymer 1.6.0 It adds native CSS custom properties support, but this causes some backwards compatibility / styling problems. To solve them, move the custom properties out of the custom style element, and move the custom style element to be positioned after the elements it's supposed to override (so in the ). Also take advantage of native support for custom properties throughout LOOT's external stylesheets. --- bower.json | 2 +- src/gui/html/css/style.css | 34 +++++++-- src/gui/html/css/typography.css | 2 +- src/gui/html/elements/editable-table.html | 8 +- src/gui/html/elements/loot-dropdown-menu.html | 13 ++-- src/gui/html/elements/loot-plugin-card.html | 10 +-- src/gui/html/elements/loot-plugin-editor.html | 14 +--- src/gui/html/elements/loot-plugin-item.html | 12 +-- .../html/elements/loot-search-toolbar.html | 19 ++--- src/gui/html/index.html | 73 ++++++------------- src/gui/html/native-shadow-dom.html | 5 -- src/gui/html/polymer-settings.html | 8 ++ 12 files changed, 96 insertions(+), 104 deletions(-) delete mode 100644 src/gui/html/native-shadow-dom.html create mode 100644 src/gui/html/polymer-settings.html diff --git a/bower.json b/bower.json index 03efe1a4..9617424b 100644 --- a/bower.json +++ b/bower.json @@ -7,7 +7,7 @@ "bower_components" ], "dependencies": { - "polymer": "Polymer/polymer#1.5.0", + "polymer": "Polymer/polymer#^1.6.0", "iron-icons": "PolymerElements/iron-icons#^1.0.0", "iron-list": "loot/iron-list#patched-for-loot", "iron-pages": "PolymerElements/iron-pages#^1.0.0", diff --git a/src/gui/html/css/style.css b/src/gui/html/css/style.css index 418c6698..8a3800be 100644 --- a/src/gui/html/css/style.css +++ b/src/gui/html/css/style.css @@ -21,10 +21,34 @@ along with LOOT. If not, see . */ +/* CSS Custom Variables */ +:root { + --state-transition-time: 0.6s; + + --primary-color: var(--paper-indigo-500); + --accent-color: var(--paper-blue-300); + --dark-accent-color: var(--paper-blue-500); + + --primary-text-color: rgba(0, 0, 0, var(--dark-primary-opacity)); + --secondary-text-color: rgba(0, 0, 0, var(--dark-secondary-opacity)); + --disabled-text-color: rgba(0, 0, 0, var(--dark-disabled-opacity)); + --divider-color: rgba(0, 0, 0, var(--dark-divider-opacity)); + + --dark-theme-text-color: white; + --dark-theme-secondary-color: rgba(255, 255, 255, var(--light-secondary-opacity)); + --dark-theme-disabled-color: rgba(255, 255, 255, var(--light-disabled-opacity)); + --dark-theme-divider-color: rgba(255, 255, 255, var(--light-divider-opacity)); + + --paper-icon-button-disabled-text: rgba(255, 255, 255, 0.30); + --paper-tabs-selection-bar-color: var(--accent-color); + --paper-tab-ink: var(--accent-color); + + --paper-toolbar-height: 56px; +} /* Misc */ a { - color: #2196F3; + color: var(--dark-accent-color); text-decoration: none; } a:hover { @@ -48,7 +72,7 @@ tt, code, kbd, samp { margin: 0 8px; } #applySortButton { - color: #2196F3; + color: var(--dark-accent-color); background-color: white; } @@ -57,7 +81,7 @@ div[drawer] { background: white; } div[drawer] > * { - border-right: 1px rgba(0, 0, 0, 0.12) solid; + border-right: 1px var(--divider-color) solid; } div[drawer] > iron-pages { overflow: auto; @@ -173,7 +197,7 @@ li.warn { /* For Material Design generic dividers. */ .divider { height: 1px; - background: rgba(0, 0, 0, 0.12); + background: var(--divider-color); margin-top: -1px; } @@ -185,5 +209,5 @@ paper-icon-item iron-icon { /* Set icons to use Material Design colouring. */ iron-icon { - color: rgba(0, 0, 0, 0.54); + color: var(--secondary-text-color); } diff --git a/src/gui/html/css/typography.css b/src/gui/html/css/typography.css index 63bba52b..c676e945 100644 --- a/src/gui/html/css/typography.css +++ b/src/gui/html/css/typography.css @@ -121,7 +121,7 @@ html { characters. If Noto isn't present, they're better than the sans-serif defaults. */ font:13px/1.429 Roboto, Noto, 'Microsoft Yahei', 'Malgun Gothic', sans-serif; - color: rgba(0, 0, 0, 0.87); + color: var(--primary-text-color); font-weight: 400; text-rendering: optimizeLegibility; } diff --git a/src/gui/html/elements/editable-table.html b/src/gui/html/elements/editable-table.html index e3321bcb..13bcb100 100644 --- a/src/gui/html/elements/editable-table.html +++ b/src/gui/html/elements/editable-table.html @@ -156,14 +156,14 @@ height: 48px; } ::content th { - color: var(--loot-secondary-text-color); - border-bottom: 1px solid var(--loot-divider-color); + color: var(--secondary-text-color); + border-bottom: 1px solid var(--divider-color); } ::content paper-icon-button { - color: var(--loot-secondary-text-color); + color: var(--secondary-text-color); } ::content paper-icon-button[disabled] { - color: var(--loot-disabled-text-color); + color: var(--disabled-text-color); } ::content paper-icon-button[icon=delete]:hover { color: red; diff --git a/src/gui/html/elements/loot-dropdown-menu.html b/src/gui/html/elements/loot-dropdown-menu.html index 2cc5370a..9047f6f6 100644 --- a/src/gui/html/elements/loot-dropdown-menu.html +++ b/src/gui/html/elements/loot-dropdown-menu.html @@ -17,22 +17,25 @@ it a