loot/libloot
0
0
Fork 0
mirror of https://github.com/loot/libloot.git synced 2026-07-27 14:16:01 -07:00
Code Issues Packages Projects Releases Wiki Activity

Update to Polymer 1.6.0

Browse Source 
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 <body>).

Also take advantage of native support for custom properties
throughout LOOT's external stylesheets.
This commit is contained in:
Oliver Hamlet
2016-07-07 17:35:07 +01:00
parent 5c5670d52f
commit aa405b3540
12 changed files with 96 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bower.json
+1 -1
View File
@@ -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",
src/gui/html/css/style.css
+29 -5
View File
@@ -21,10 +21,34 @@
along with LOOT. If not, see
<http://www.gnu.org/licenses/>.
*/
/* 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);
}
src/gui/html/css/typography.css
+1 -1
View File
@@ -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;
}
src/gui/html/elements/editable-table.html
+4 -4
View File
@@ -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;
src/gui/html/elements/loot-dropdown-menu.html
+8 -5
View File
@@ -17,22 +17,25 @@ it a <select>-like API. This means:
<style>
paper-dropdown-menu {
--paper-input-container: {
transition: opacity 0.6s;
transition: opacity var(--state-transition-time);
};
--paper-dropdown-menu-icon: {
color: var(--loot-secondary-text-color);
color: var(--secondary-text-color);
};
}
:host(.dark) paper-dropdown-menu {
--paper-input-container-underline: {
background-color: var(--loot-dark-theme-divider-color);
background-color: var(--dark-theme-divider-color);
};
--paper-input-container-underline-disabled: {
border-color: var(--dark-theme-divider-color);
};
--paper-input-container-input-color: white;
--paper-dropdown-menu-input: {
color: var(--loot-dark-theme-primary-text-color);
color: var(--dark-theme-text-color);
};
--paper-dropdown-menu-icon: {
color: var(--loot-dark-theme-secondary-text-color);
color: var(--dark-theme-secondary-color);
};
}
</style>
src/gui/html/elements/loot-plugin-card.html
+5 -5
View File
@@ -26,15 +26,15 @@
position: relative;
}
:host(.highlight) #wrapper {
outline: 4px solid var(--loot-accent-color);
outline: 4px solid var(--accent-color);
}
:host(.search-result) #wrapper > * {
box-shadow: inset 4px 0 var(--loot-primary-color);
box-shadow: inset 4px 0 var(--primary-color);
}
/* Icon styling. */
iron-icon {
color: var(--loot-secondary-text-color);
color: var(--secondary-text-color);
padding: 8px;
}
#activeTick {
@@ -71,8 +71,8 @@
/* Misc Styling. */
paper-toolbar {
--paper-toolbar-color: var(--loot-primary-text-color);
--paper-toolbar-background: inherit;
--paper-toolbar-color: var(--primary-text-color);
--paper-toolbar-background: white;
}
#content {
overflow: hidden;
src/gui/html/elements/loot-plugin-editor.html
+4 -10
View File
@@ -32,7 +32,7 @@ loot-editor-close
height: 264px;
min-height: 56px;
max-height: calc(100% - 56px);
transition: height 0.6s, min-height 0.6s;
transition: height var(--state-transition-time), min-height var(--state-transition-time);
}
:host(.hidden) {
height: 0;
@@ -44,7 +44,7 @@ loot-editor-close
/* Material Design for non-button icons. */
iron-icon {
color: var(--loot-secondary-text-color);
color: var(--secondary-text-color);
padding: 8px;
}
@@ -53,7 +53,7 @@ loot-editor-close
display: none;
}
#accept {
color: var(--loot-dark-accent-color);
color: var(--dark-accent-color);
}
#cancel {
color: red;
@@ -86,7 +86,7 @@ loot-editor-close
/* Misc Styling. */
paper-toolbar.medium-tall {
--paper-toolbar-background: var(--paper-blue-50);
--paper-toolbar-color: var(--loot-primary-text-color);
--paper-toolbar-color: var(--primary-text-color);
height: 104px;
}
#main {
@@ -97,12 +97,6 @@ loot-editor-close
overflow: hidden;
white-space: nowrap;
}
#tableTabs {
--paper-tabs-selection-bar-color: var(--loot-accent-color);
}
paper-tab {
--paper-tab-ink: var(--loot-accent-color);
}
#splitter {
width: 100%;
height: 10px;
src/gui/html/elements/loot-plugin-item.html
+6 -6
View File
@@ -14,7 +14,7 @@
/* Flip effect for user metadata / editor open icons. */
#flipper {
transform-style: preserve-3d;
transition: 0.6s;
transition: var(--state-transition-time);
overflow: visible;
}
#flipper.flipped {
@@ -45,7 +45,7 @@
--paper-item-focused-before: {
opacity: 0;
}
};
}
paper-item-body[two-line] {
min-height: 32px;
@@ -57,14 +57,14 @@
#primary,
#secondary,
#secondary iron-icon {
transition: height 0.6s;
transition: height var(--state-transition-time);
}
:host-context(body[data-editors]) #primary {
line-height: normal;
}
#priority {
font-size: 0.857rem;
color: var(--loot-secondary-text-color);
color: var(--secondary-text-color);
height: 13px;
overflow: visible;
}
@@ -72,7 +72,7 @@
height: 13px;
}
iron-icon {
color: var(--loot-secondary-text-color);
color: var(--secondary-text-color);
}
/* When not in edit mode, hide secondary text. */
:host-context(body:not([data-editors])) #secondary {
@@ -91,7 +91,7 @@
cursor: pointer;
}
paper-ripple {
color: var(--loot-accent-color);
color: var(--accent-color);
}
</style>
<paper-item>
src/gui/html/elements/loot-search-toolbar.html
+8 -11
View File
@@ -18,24 +18,21 @@ loot-search-end: Fired when the close button is clicked.
<dom-module id="loot-search-toolbar">
<template>
<style>
paper-input {
@apply(--layout-horizontal);
#search {
@apply(--layout-flex);
--paper-input-container: {
@apply(--layout-flex);
};
--paper-input-container-input-color: var(--loot-dark-theme-text-color);
--paper-input-container-label: {
color: var(--loot-dark-theme-disabled-color);
}
--paper-input-container-input-color: var(--dark-theme-text-color);
--paper-input-container-color: var(--dark-theme-secondary-color);
--paper-input-container-underline: {
background-color: var(--loot-dark-theme-divider-color);
background-color: var(--dark-theme-divider-color);
};
display: block;
}
#count {
font-weight: 400;
font-size: 0.857rem;
color: var(--loot-dark-theme-secondary-color);
color: var(--dark-theme-secondary-color);
}
</style>
<paper-toolbar>
src/gui/html/index.html
+22 -51
View File
@@ -5,7 +5,7 @@
<link rel="stylesheet" href="css/typography.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="import" href="native-shadow-dom.html">
<link rel="import" href="polymer-settings.html">
<link rel="import" href="../../../bower_components/polymer/polymer.html">
@@ -46,8 +46,12 @@
<link rel="import" href="../../../bower_components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../../../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../../../bower_components/paper-tooltip/paper-tooltip.html">
<style is="custom-style">
</head>
<!-- oncontextmenu attribute disables the right-click menu. -->
<body oncontextmenu="return false" unresolved>
<!-- This style element needs to be here so that it loads after the Vulcanized
imports, which are placed in a div that is the first child of body. -->
<style is="custom-style" include="paper-item-shared-styles">
div[drawer],
div[main] {
@apply(--layout-vertical);
@@ -86,53 +90,37 @@
#conflictsFilter {
--paper-dropdown-menu: {
display: block;
}
};
}
.paper-item {
display: flex;
align-items: center;
}
/* Paper element styling.
Colour variables are from Polymer's paper-styles element. */
:root {
--loot-primary-color: var(--paper-indigo-500);
--loot-accent-color: var(--paper-blue-300);
--loot-dark-accent-color: var(--paper-blue-500);
--loot-primary-text-color: rgba(0, 0, 0, var(--dark-primary-opacity));
--loot-secondary-text-color: rgba(0, 0, 0, var(--dark-secondary-opacity));
--loot-disabled-text-color: rgba(0, 0, 0, var(--dark-disabled-opacity));
--loot-divider-color: rgba(0, 0, 0, var(--dark-divider-opacity));
--loot-dark-theme-text-color: white;
--loot-dark-theme-secondary-color: rgba(255, 255, 255, var(--light-secondary-opacity));
--loot-dark-theme-disabled-color: rgba(255, 255, 255, var(--light-disabled-opacity));
--loot-dark-theme-divider-color: rgba(255, 255, 255, var(--light-divider-opacity));
a,
#applySortButton {
color: var(--loot-dark-accent-color);
}
--paper-button: {
font-weight: 500;
font-size: 1rem;
}
};
--paper-icon-button-disabled-text: rgba(255, 255, 255, 0.30);
--paper-icon-button-disabled: {
transition: color 0.6s;
}
transition: color var(--state-transition-time);
};
--paper-icon-item: {
white-space: nowrap;
}
};
--paper-input-container-input: {
text-overflow: ellipsis;
}
};
--paper-input-container-underline: {
background-color: var(--loot-divider-color);
background-color: var(--divider-color);
};
--paper-input-container-underline-focus: {
background-color: var(--loot-accent-color);
background-color: var(--accent-color);
};
paper-menu-button {
@@ -140,35 +128,18 @@
font-weight: 500;
font-size: 1rem;
white-space: nowrap;
}
};
}
--paper-tabs-selection-bar-color: var(--loot-accent-color);
--paper-tab-ink: var(--loot-accent-color);
--paper-tab-content: {
text-transform: uppercase;
}
};
/* Prevents pop-in for the toggle button when a dropdown containing it is
opened. */
--paper-toggle-button-unchecked-button: {
will-change: initial;
}
--paper-toolbar-background: var(--loot-primary-color);
/*--paper-toolbar-color: var(--loot-primary-text-color);*/
--paper-toolbar-height: 56px;
}
</style>
</head>
<!-- oncontextmenu attribute disables the right-click menu. -->
<body oncontextmenu="return false" unresolved>
<!-- This style element needs to be here so that it loads after the Vulcanized
imports, which are placed in a div that is the first child of body. -->
<style is="custom-style" include="paper-item-shared-styles">
.paper-item {
display: flex;
align-items: center;
};
}
</style>
<paper-drawer-panel id="container" drawer-width="33%">
src/gui/html/native-shadow-dom.html
-5
View File
@@ -1,5 +0,0 @@
<script>
'use strict';
window.Polymer = window.Polymer || {};
window.Polymer.dom = 'shadow';
</script>
src/gui/html/polymer-settings.html
+8
View File
@@ -0,0 +1,8 @@
<script>
'use strict';
window.Polymer = {
dom: 'shadow',
lazyRegister: true,
useNativeCSSProperties: true,
};
</script>