diff --git a/.eslintrc.yml b/.eslintrc.yml index 36db78a8..b0fb30ac 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -26,3 +26,6 @@ rules: - props: false arrow-body-style: 1 max-len: 1 + +plugins: + - eslint-plugin-html diff --git a/bower.json b/bower.json index 060c2965..381f6742 100644 --- a/bower.json +++ b/bower.json @@ -7,46 +7,36 @@ "bower_components" ], "dependencies": { - "polymer": "Polymer/polymer#~0.5.0", - "paper-icon-button": "Polymer/paper-icon-button#~0.5.0", - "paper-dropdown-menu": "Polymer/paper-dropdown-menu#~0.5.0", - "core-toolbar": "Polymer/core-toolbar#~0.5.0", - "core-icons": "Polymer/core-icons#~0.5.0", - "core-label": "Polymer/core-label#~0.5.0", - "core-tooltip": "Polymer/core-tooltip#~0.5.0", - "core-drawer-panel": "Polymer/core-drawer-panel#~0.5.0", - "paper-input": "Polymer/paper-input#~0.5.0", - "paper-tabs": "Polymer/paper-tabs#~0.5.0", - "core-menu": "Polymer/core-menu#~0.5.0", - "paper-checkbox": "Polymer/paper-checkbox#~0.5.0", - "paper-dialog": "Polymer/paper-dialog#~0.5.0", - "paper-menu-button": "Polymer/paper-menu-button#~0.5.0", + "polymer": "Polymer/polymer#^1.1.0", + "iron-dropdown": "loot/iron-dropdown#fix-position-inside-transformed-element", + "iron-icons": "PolymerElements/iron-icons#^1.0.0", + "iron-list": "loot/iron-list#patched-for-loot", + "iron-pages": "PolymerElements/iron-pages#^1.0.0", + "neon-animation": "PolymerElements/neon-animation#^1.0.0", + "paper-button": "PolymerElements/paper-button#^1.0.0", + "paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0", + "paper-dialog": "PolymerElements/paper-dialog#^1.0.0", + "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^1.0.0", + "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^1.0.0", + "paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.0.0", + "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0", + "paper-input": "PolymerElements/paper-input#^1.0.0", + "paper-item": "PolymerElements/paper-item#^1.0.0", + "paper-listbox": "PolymerElements/paper-listbox#^1.1.1", + "paper-menu": "PolymerElements/paper-menu#^1.0.0", + "paper-menu-button": "PolymerElements/paper-menu-button#^1.0.0", + "paper-progress": "PolymerElements/paper-progress#^1.0.0", + "paper-tabs": "PolymerElements/paper-tabs#^1.0.0", + "paper-toast": "PolymerElements/paper-toast#^1.0.0", + "paper-toggle-button": "PolymerElements/paper-toggle-button#^1.0.0", + "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0", + "paper-tooltip": "PolymerElements/paper-tooltip#^1.0.0", "Jed": "SlexAxton/Jed#a9d03e1bbca9211a8b29a93a298a7ee9ddb353f0", - "marked": "~0.3.2", - "paper-progress": "Polymer/paper-progress#~0.5.0", - "core-pages": "Polymer/core-pages#~0.5.1", - "paper-toast": "Polymer/paper-toast#~0.5.1", - "core-list": "WrinklyNinja/core-list#patched-for-loot", - "core-dropdown": "WrinklyNinja/core-dropdown#null-dimensions-positions-fix", - "jed-gettext-parser": "~1.0.0", - "paper-toggle-button": "Polymer/paper-toggle-button#~0.5.4", - "core-overlay": "WrinklyNinja/core-overlay#fix-focus-self-as-next" + "jed-gettext-parser": "^1.0.0", + "marked": "^0.3.2", + "lodash": "^4.3.0" }, "resolutions": { - "polymer": "^0.5", - "core-icons": "^0.5", - "core-icon": "^0.5", - "core-collapse": "^0.5", - "core-focusable": "^0.5", - "core-icon-button": "^0.5", - "core-resizable": "^0.5", - "core-iconset-svg": "^0.5", - "core-dropdown": "null-dimensions-positions-fix", - "core-transition": "^0.5", - "core-overlay": "fix-focus-self-as-next", - "webcomponentsjs": "^0.7.18", - "core-iconset": "^0.5", - "core-selection": "^0.5", - "core-meta": "^0.5" + "iron-dropdown": "fix-position-inside-transformed-element" } } diff --git a/docs/LOOT Readme.html b/docs/LOOT Readme.html index 27f583a8..44e57a73 100644 --- a/docs/LOOT Readme.html +++ b/docs/LOOT Readme.html @@ -203,7 +203,6 @@ var {
  • Editing Plugin Metadata
  • Editing Settings -
  • Themes
  • Contributing & Support
  • Credits
  • License @@ -471,9 +470,6 @@ var { Install Path Registry KeyThe registry key, in HKEY_LOCAL_MACHINE, that contains the install path of the game. This is used to obtain the install path if LOOT has no previous record of the game's install path, or LOOT's stored install path is invalid. Either this or an install path must be supplied. -

    Themes

    -

    LOOT's user interface has experimental support for the use of alternative and custom CSS themes. To use a theme, place its CSS file into the resources/ui/css folder inside LOOT's installation folder, and rename the file to theme.css. LOOT will then load this file when it launches. A dark user interface theme is provided with LOOT: to use it, rename dark-theme.css in the resources/ui/css folder to theme.css. Theme support is experimental because future updates to LOOT's user interface may break existing CSS selectors.

    -

    Contributing & Support

    LOOT is very much a community project, and contributions from its users are very welcome, whether they be metadata, translations, code or anything else. The best way to contribute is to make changes yourself at GitHub! It's the fastest way to get changes you want applied, and you'll get your name automatically immortalised in our credits. diff --git a/package.json b/package.json index 0be3bf03..8be6274c 100644 --- a/package.json +++ b/package.json @@ -16,15 +16,17 @@ "bower": "^1.7.1", "eslint": "^1.10.3", "eslint-config-airbnb": "^4.0.0", + "eslint-plugin-html": "^1.3.0", "fs-extra": "^0.26.2", "grunt": "^0.4.5", "grunt-cli": "^0.1.13", "grunt-contrib-connect": "^0.11.2", "grunt-contrib-watch": "^0.6.1", "grunt-saucelabs": "^8.6.2", + "mkdirp": "^0.5.1", "mocha": "^2.3.4", "should": "^8.0.1", - "vulcanize": "^0.7.11" + "vulcanize": "^1.14.5" }, "scripts": { "test": "grunt test" diff --git a/resources/ui/css/dark-theme.css b/resources/ui/css/dark-theme.css deleted file mode 100644 index 7f260501..00000000 --- a/resources/ui/css/dark-theme.css +++ /dev/null @@ -1,111 +0,0 @@ -/* Dark theme CSS overrides. */ -html, -html /deep/ paper-item, html /deep/ core-menu > paper-item, -html /deep/ paper-dropdown-menu::shadow #label { - color: white !important; -} - -html, body { - background: black; -} - -html /deep/ paper-item[disabled], -html /deep/ paper-item[disabled] > core-icon, -html /deep/ paper-input-decorator::shadow .label-text, -html /deep/ input::-webkit-input-placeholder, -html /deep/ table[is=editable-table] paper-icon-button[disabled], -html /deep/ loot-dropdown-menu::shadow paper-dropdown-menu[disabled]::shadow #label, -html /deep/ loot-dropdown-menu::shadow paper-dropdown-menu::shadow #arrow { - color: rgba(255, 255, 255, 0.3) !important; -} - -html /deep/ paper-item core-icon, -html /deep/ paper-tabs::shadow .scroll-button > paper-icon-button, -html /deep/ table[is=editable-table] paper-icon-button, -html /deep/ loot-plugin-card::shadow core-tooltip:not(#activeTick) > core-icon, -html /deep/ loot-plugin-card::shadow #conflictsLabel > core-icon, -html /deep/ loot-plugin-item::shadow #secondary, -html /deep/ loot-plugin-editor::shadow core-tooltip:not(#activeTick) > core-icon { - color: rgba(255, 255, 255, 0.7) !important; -} - -html /deep/ paper-input-decorator::shadow .underline .unfocused-underline, -.divider { - background-color: rgba(255, 255, 255, 0.12) !important; -} - -html /deep/ paper-input-decorator[disabled]::shadow .underline, -html /deep/ table th, -html /deep/ paper-dropdown-menu { - border-bottom-color: rgba(255, 255, 255, 0.12) !important; -} - -html /deep/ paper-checkbox::shadow #checkbox.checked { - border-color: #1A237E !important; -} - -html /deep/ paper-toggle-button::shadow [checked] .toggle-bar { - background-color: rgba(26, 35, 126, 0.5) !important; -} - -html /deep/ paper-toggle-button::shadow [checked] .toggle-button, -html /deep/ paper-checkbox::shadow #checkbox.checked { - background-color: #1A237E !important; -} - -html /deep/ paper-toggle-button::shadow [checked] .toggle-ink { - color: #1A237E !important; -} - -/* Dark dropdown menus. */ -html /deep/ paper-dropdown::shadow #background, -loot-dialog, -loot-message-dialog, -div[drawer], -#summary, -html /deep/ loot-plugin-card::shadow #wrapper, -html /deep/ loot-plugin-editor::shadow core-selector > * { - background: #424242 !important; -} - -/* Dark dialogs. */ -loot-dialog, -loot-message-dialog { - color: white !important; -} - -/* Dark progress bar background. */ -paper-progress::shadow #progressContainer { - background-color: #303030 !important; -} - -core-toolbar, -div[drawer] > div:first-child, -html /deep/ loot-search::shadow core-toolbar, -html /deep/ loot-plugin-editor { - background: #212121 !important; -} - -#main { - background: #303030 !important; -} - -li.error > p, -li.warn > p { - color: black !important; -} - -.version { - color: #78909C !important; -} -.crc { - color: #8D6E63 !important; -} - -html /deep/ loot-plugin-card.search-result::shadow #editor { - box-shadow: inset 4px 0 #1A237E !important; -} - -html /deep/ loot-plugin-editor::shadow core-selector > * { - border-bottom: 4px solid #212121 !important; -} diff --git a/scripts/archive.js b/scripts/archive.js index 8b8a444b..21ea4c6b 100644 --- a/scripts/archive.js +++ b/scripts/archive.js @@ -115,10 +115,6 @@ function createAppArchive(rootPath, releasePath, tempPath, destPath) { path.join(releasePath, 'resources', 'ui', 'index.html'), path.join(tempPath, 'resources', 'ui', 'index.html') ); - fs.copySync( - path.join(rootPath, 'resources', 'ui', 'css', 'dark-theme.css'), - path.join(tempPath, 'resources', 'ui', 'css', 'dark-theme.css') - ); fs.copySync( path.join(rootPath, 'resources', 'ui', 'fonts'), path.join(tempPath, 'resources', 'ui', 'fonts') diff --git a/scripts/installer.iss b/scripts/installer.iss index 9c9bc3cd..01d05dd5 100644 --- a/scripts/installer.iss +++ b/scripts/installer.iss @@ -108,8 +108,6 @@ DestDir: "{app}\docs\images"; Flags: ignoreversion Source: "{#buildir}\Release\resources\ui\index.html"; \ DestDir: "{app}\resources\ui"; Flags: ignoreversion -Source: "resources\ui\css\dark-theme.css"; \ -DestDir: "{app}\resources\ui\css"; Flags: ignoreversion Source: "resources\ui\fonts\*"; \ DestDir: "{app}\resources\ui\fonts"; Flags: ignoreversion diff --git a/scripts/vulcanize.js b/scripts/vulcanize.js index 34b0cd40..2cd7c306 100755 --- a/scripts/vulcanize.js +++ b/scripts/vulcanize.js @@ -5,16 +5,27 @@ const path = require('path'); const fs = require('fs'); const helpers = require('./helpers'); -const vulcanize = require('vulcanize'); +const Vulcanize = require('vulcanize'); +const mkdirp = require('mkdirp'); +// Initialise from command line parameters. let rootPath = '.'; -if (process.argv.length > 2) { +let buildType = 'ui'; +if (process.argv.length > 3) { + rootPath = process.argv[2]; + buildType = process.argv[3]; +} else if (process.argv.length > 2) { rootPath = process.argv[2]; } +const vulcanize = new Vulcanize({ + inlineScripts: true, + inlineCss: true, +}); + function mkdir(dir) { try { - fs.mkdirSync(dir); + mkdirp.sync(dir); } catch (e) { if (e.code !== 'EEXIST') { console.log(e); @@ -22,29 +33,55 @@ function mkdir(dir) { } } -function runVulcanize(err) { - if (err) { - console.error(err); - process.exit(1); - } - vulcanize.processDocument(); +function vulcanizeFile(inputPath, outputPath) { + // Make sure output directory exists first. + mkdir(path.dirname(outputPath)); + + vulcanize.process(inputPath, (err, inlinedHtml) => { + if (err) { + console.error(err); + process.exit(1); + } + + fs.writeFileSync(outputPath, inlinedHtml); + }); } function vulcanizeRelease(releasePath) { const inputPath = path.join(rootPath, 'src', 'gui', 'html', 'index.html'); const outputPath = path.join(releasePath.path, 'resources', 'ui', 'index.html'); - // Make sure output directory exists first. - mkdir(path.dirname(outputPath)); - - vulcanize.setOptions({ - inline: true, - excludes: { - styles: ['css/theme.css'], - }, - output: outputPath, - input: inputPath, - }, runVulcanize); + vulcanizeFile(inputPath, outputPath); } -helpers.getAppReleasePaths(rootPath).forEach(vulcanizeRelease); +function vulcanizeTests(releasePath) { + const inputPath = path.join(rootPath, 'src', 'tests', 'gui', 'html', 'elements'); + const outputPath = path.join(releasePath.path, 'html_tests', 'elements'); + + const tests = [ + 'test_editable-table.html', + 'test_loot-custom-icons.html', + 'test_loot-dropdown-menu.html', + 'test_loot-menu.html', + 'test_loot-message-dialog.html', + 'test_loot-plugin-card.html', + 'test_loot-plugin-editor.html', + 'test_loot-plugin-item.html', + 'test_loot-search-toolbar.html', + ]; + + tests.forEach((test) => { + vulcanizeFile(path.join(inputPath, test), path.join(outputPath, test)); + }); +} + +// Run the appropriate build(s). +const releasePaths = helpers.getAppReleasePaths(rootPath); + +if (buildType === 'ui' || buildType === 'all') { + releasePaths.forEach(vulcanizeRelease); +} + +if (buildType === 'tests' || buildType === 'all') { + releasePaths.forEach(vulcanizeTests); +} diff --git a/src/gui/html/css/material.css b/src/gui/html/css/material.css deleted file mode 100644 index 9bd464cb..00000000 --- a/src/gui/html/css/material.css +++ /dev/null @@ -1,110 +0,0 @@ -/* This file contains the CSS overrides for Polymer elements necessary for them - to better match the Material Design spec. */ - -/* core-tooltip */ -html /deep/ core-tooltip::shadow .core-tooltip { - font-size: 0.714rem; - font-family: Roboto, sans-serif; - font-weight: 500; - background-color: rgba(0, 0, 0, 0.9); -} - -/* paper-button */ -html /deep/ paper-button { - min-width: 88px; - height: 36px; - line-height: 36px; - margin: 6px 4px; -} -html /deep/ paper-button::shadow .button-content { - padding: 0 8px; -} -html /deep/ paper-button::shadow .button-content ::content a { - margin: 0 -8px; - padding: 0 8px; - -ms-flex: 1 1 auto; -} - -/* paper-icon-button */ -html /deep/ paper-icon-button[disabled] { - color: rgba(255, 255, 255, 0.30); -} - -/* paper-item */ -html /deep/ paper-item, html /deep/ core-menu > paper-item { - color: rgba(0, 0, 0, 0.87); - height: 48px; - line-height: 48px; -} -html /deep/ paper-item[disabled] { - color: rgba(0, 0, 0, 0.26); -} -html /deep/ paper-item core-icon { - margin-right: 32px; - color: rgba(0, 0, 0, 0.54); -} -html /deep/ paper-item[disabled] > core-icon { - color: rgba(0, 0, 0, 0.26); -} -html /deep/ paper-item::shadow .button-content { - padding: 0 16px; -} -html /deep/ paper-item::shadow .button-content ::content *:not(core-tooltip) { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; -} -html /deep/ paper-item::shadow .button-content ::content a { - margin: 0 -16px; - padding: 0 16px; - -ms-flex: 1 1 auto; -} - -/* paper-input-decorator & input */ -html /deep/ paper-input-decorator { - margin: 0 4px; -} -html /deep/ paper-input-decorator::shadow .underline .unfocused-underline { - background-color: rgba(0, 0, 0, 0.12); -} -html /deep/ paper-input-decorator[disabled]::shadow .underline { - border-bottom-color: rgba(0, 0, 0, 0.12); -} -html /deep/ paper-input-decorator::shadow .label-text, -html /deep/ input::-webkit-input-placeholder { - color: rgba(0, 0, 0, 0.26); -} -html /deep/ ::-moz-placeholder { - opacity: 1 !important; - color: rgba(0, 0, 0, 0.26) !important; -} -html /deep/ :-ms-input-placeholder { - color: rgba(0, 0, 0, 0.26) !important; -} -html /deep/ input { - text-overflow: ellipsis; -} - -/* paper-dropdown */ -html /deep/ paper-dropdown > core-menu { - margin: 8px 0; -} -html /deep/ paper-dropdown .core-selected { - background-color: inherit; -} - -/* paper-tabs */ -html /deep/ paper-tabs::shadow .scroll-button > paper-icon-button { - vertical-align: middle; - color: rgba(0, 0, 0, 0.54); -} - -/* paper-tab */ -html /deep/ paper-tab::shadow .tab-content { - line-height: 48px; -} - -/* core-drawer-panel */ -core-drawer-panel::shadow .narrow-layout #drawer { - width: calc(100vw - 56px) !important; -} diff --git a/src/gui/html/css/overrides.css b/src/gui/html/css/overrides.css deleted file mode 100644 index aa5a1597..00000000 --- a/src/gui/html/css/overrides.css +++ /dev/null @@ -1,92 +0,0 @@ -/* These styles override Polymer's own internal styling for certain elements to - suit LOOT's needs. */ - -/* Transition icon button colour over same time period that plugin cards flip. */ -paper-icon-button[disabled] { - transition: color 0.6s; -} -/* This override change the positioning of the progress dialog to adapt to content changes. */ -#progressDialog { - position: inherit !important; - margin: 0 auto; - top: 0; - left: 0; - bottom: 0; - right: 0; -} -/* This makes checkboxes have the same padding as icons in lists. */ -html /deep/ core-menu paper-checkbox::shadow #checkboxLabel { - padding-left: 32px; -} -/* Set the sidebar checkboxes to have balanced padding on either side. 32px - makes the label just seem too far away. */ -#filters paper-checkbox::shadow #checkboxLabel { - padding-left: 16px; -} -/* Set the underline colour of focussed paper inputs. */ -html /deep/ paper-input-decorator::shadow .underline .focused-underline { - /* line color when the input is focused */ - background-color: #64B5F6; -} -/* Set the tab colours. */ -html /deep/ paper-tabs::shadow #selectionBar { - background-color: #64B5F6; -} -html /deep/ paper-tab::shadow #ink { - color: #64B5F6; -} -/* Set the paper tab scroll buttons so they don't cause the cursor to display as - as a pointer when they are disabled. */ -html /deep/ paper-tabs::shadow .scroll-button .hidden { - pointer-events: none; -} -/* Set the drawer z-index so that it doesn't appear below plugin cards. */ -core-drawer-panel::shadow #drawer { - /* max-width disabled because the panel doesn't shift over when the max - is reached, due to the percentage drawer width, and setting it to a - constant 400px is too wide in many window sizes. */ - /*max-width: 400px;*/ - z-index: 1; -} -/* Align dropdown label text with the descriptive text beside it. */ -#settingsDialog loot-dropdown-menu::shadow paper-dropdown-menu { - padding-top: 4px; -} -/* Add a transition to the core-tooltip tooltips. */ -html /deep/ core-tooltip::shadow .core-tooltip { - opacity: 0; - transition: opacity 0.3s, visibility 0s 0.3s; -} -html /deep/ core-tooltip:hover:not([disabled])::shadow .core-tooltip { - opacity: 1; - transition-delay: 0s; -} - -/* The max-height doesn't allow for expansion into newly-created scroll space. */ -#main /deep/ paper-dropdown::shadow #scroller { - max-height: none !important; -} - -/* Don't center the "Jump to General Information" or active plugin tooltips, as - they can get cut off by the sidebar. */ -#drawerToggle + core-tooltip::shadow #tooltip, -loot-plugin-card /deep/ #activeTick::shadow #tooltip { - left: inherit !important; -} - -/* Style the paper-checkbox background. */ -html /deep/ paper-checkbox::shadow #checkbox.checked { - border-color: #3F51B5; - background-color: #3F51B5; -} - -/* Style the paper-toggle-button colours. */ -html /deep/ paper-toggle-button::shadow [checked] .toggle-bar { - background-color: rgba(63, 81, 181, 0.5); -} -html /deep/ paper-toggle-button::shadow [checked] .toggle-button { - background-color: #3F51B5; -} -html /deep/ paper-toggle-button::shadow [checked] .toggle-ink { - color: #3F51B5; -} diff --git a/src/gui/html/css/style.css b/src/gui/html/css/style.css index d2a94c52..a687df0e 100644 --- a/src/gui/html/css/style.css +++ b/src/gui/html/css/style.css @@ -23,9 +23,6 @@ */ /* Misc */ -html /deep/ paper-button[autofocus] { - color: #64B5F6; -} a { color: #2196F3; text-decoration: none; @@ -38,11 +35,6 @@ tt, code, kbd, samp { } /* App bar */ -core-toolbar, div[drawer] > div:first-child { - background: #3F51B5; - color: white; - height: 56px; -} #mainToolbar, #searchBar { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); @@ -52,13 +44,6 @@ core-toolbar, div[drawer] > div:first-child { #mainToolbar.search { display: none; } -#gameMenu { - margin-top: -0.5em; -} -#drawerToggle, #applySortButton, #cancelSortButton { - position: relative; - top: -3px; -} #applySortButton { color: #2196F3; background-color: white; @@ -71,55 +56,44 @@ div[drawer] { div[drawer] > * { border-right: 1px rgba(0, 0, 0, 0.12) solid; } -paper-item > a { - -webkit-user-drag: none; - color: inherit; +div[drawer] > iron-pages { + overflow: auto; } -paper-item > a:hover { - text-decoration: none; -} -#cardsNav[data-editModeToggle] > loot-plugin-item { - transition: transform 0.6s; -} -#cardsNav > loot-plugin-item { - margin: 8px 0; -} -#contentFilter { - display: block; - line-height: initial; +#cardsNav { + padding-top: 8px; + padding-bottom: 8px; } #filters { padding: 8px 0; - overflow: hidden; + overflow: auto; } #filters > paper-checkbox, -#filters > core-tooltip, -#filters > div:not(.divider) { +#hiddenPlugins, +#hiddenMessages { padding: 0 16px; height: 48px; line-height: 48px; } -#filters > paper-checkbox, -#filters > core-tooltip { - display: block; +#contentFilter { + padding: 0 16px; + height: 48px; } /* Panel */ #main { - background: #EEE; + background-color: #fafafa; overflow: auto; position: relative; z-index: 0; } -#main > core-list { +#main > iron-list { transform-style: preserve-3d; + margin-bottom: 170px; } #summary { - background: white; + background-color: white; margin: 8px; padding: 16px; - border-radius: 2px; - box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px; } #summary > h1 { margin: -16px 0 0; @@ -132,6 +106,7 @@ paper-item > a:hover { margin-right: 32px; width: auto; background-color: inherit; + border-collapse: collapse; } #summary > table:last-child { margin-right: 0; @@ -167,28 +142,25 @@ li.warn { /* Dialogs */ #about { - max-width: 580px; + max-width: 550px; } #about blockquote { white-space: pre-line; } -#settingsDialog > div > * { +#settingsDialog > paper-dialog-scrollable > div > * { margin: 16px; } -#settingsDialog > div > div > :first-child { +#settingsDialog > paper-dialog-scrollable > div > div > :first-child { margin-right: 16px; margin-left: 0; } -#settingsDialog > div > :last-child { +#settingsDialog > paper-dialog-scrollable > div > :last-child { margin-right: 0; } -#settingsDialog core-label [for]:last-child { - margin-left: 16px; -} #gameTable { margin: 32px 0 0; } -paper-progress { +#progressDialog paper-progress { width: 100%; } @@ -199,16 +171,13 @@ paper-progress { margin-top: -1px; } -/* Tables */ -html /deep/ table { - border-collapse: collapse; - width: 100%; +/* Hack for the squashing of icons when text is not wrapped, due to the use of + flex display. See */ +paper-icon-item iron-icon { + margin-right: 32px; } -html /deep/ table td, html /deep/ table th { - vertical-align: top; - text-align: left; - padding: 8px 16px; -} -html /deep/ table th { - border-bottom: 1px solid rgba(0, 0, 0, 0.12); + +/* Set icons to use Material Design colouring. */ +iron-icon { + color: rgba(0, 0, 0, 0.54); } diff --git a/src/gui/html/css/typography.css b/src/gui/html/css/typography.css index f21c2e57..63bba52b 100644 --- a/src/gui/html/css/typography.css +++ b/src/gui/html/css/typography.css @@ -125,80 +125,9 @@ html { font-weight: 400; text-rendering: optimizeLegibility; } -.display4 { - font-weight: 300; - font-size: 8rem; - color: rgba(0, 0, 0, 0.54); - /*letter-spacing: -0.01em;*/ -} -.display3 { +h1 { font-weight: 400; - font-size: 4rem; - color: rgba(0, 0, 0, 0.54); - /*letter-spacing: -0.005em;*/ } -.display2, h1 { - font-weight: 400; - font-size: 3.214rem; - color: rgba(0, 0, 0, 0.54); - line-height: 1.067; -} -.display1 { - font-weight: 400; - font-size: 2.429rem; - color: rgba(0, 0, 0, 0.54); - line-height: 1.176; -} -.headline, h2 { - font-weight: 400; - font-size: 1.714rem; - line-height: 1.333; -} -.title, h3 { - font-weight: 500; - font-size: 1.429rem; - /*letter-spacing: 0.005em;*/ -} -.subhead, h4, -#summary > h1, -html /deep/ paper-item { - font-weight: 400; +#summary > h1 { font-size: 1.143rem; - line-height: 1.75; - /* Alternate line height: */ - /* line-height: 1.5; */ - /*letter-spacing: 0.01em;*/ -} -.body2, -html /deep/ paper-menu-button paper-item, -html /deep/ paper-menu-button paper-checkbox { - font-weight: 500; - font-size: 1rem; - line-height: 1.714; - /*letter-spacing: 0.01em;*/ -} -.body1, -html /deep/ paper-checkbox, -paper-toast { - font-weight: 400; - font-size: 1rem; - line-height: 1.429; - /*letter-spacing: 0.01em;*/ -} -.caption { - font-weight: 400; - font-size: 0.857rem; - color: rgba(0, 0, 0, 0.54); - /*letter-spacing: 0.02em;*/ -} -.button, -html /deep/ paper-tab, -html /deep/ paper-button { - font-weight: 500; - font-size: 1rem; - text-transform: uppercase; - /*letter-spacing: 0.01em;*/ -} -.display4.dark, .display3.dark, .display2.dark, .display1.dark, .caption.dark { - color: rgba(255, 255, 255, 0.7); } diff --git a/src/gui/html/elements/editable-table.html b/src/gui/html/elements/editable-table.html index 98c9fbc9..bf7e9948 100644 --- a/src/gui/html/elements/editable-table.html +++ b/src/gui/html/elements/editable-table.html @@ -1,340 +1,350 @@ - - + + + - - + + + + - - + + + + + diff --git a/src/gui/html/elements/loot-custom-icons.html b/src/gui/html/elements/loot-custom-icons.html index 88569071..c3eabb4b 100644 --- a/src/gui/html/elements/loot-custom-icons.html +++ b/src/gui/html/elements/loot-custom-icons.html @@ -1,15 +1,16 @@ - + + - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/src/gui/html/elements/loot-dialog.html b/src/gui/html/elements/loot-dialog.html deleted file mode 100644 index b0675b55..00000000 --- a/src/gui/html/elements/loot-dialog.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - - - diff --git a/src/gui/html/elements/loot-dropdown-menu.html b/src/gui/html/elements/loot-dropdown-menu.html index 4eaa925e..e59ac5e5 100644 --- a/src/gui/html/elements/loot-dropdown-menu.html +++ b/src/gui/html/elements/loot-dropdown-menu.html @@ -8,58 +8,58 @@ it a