From 45cae5bc280a259739f274f3fb17c595b8239f5a Mon Sep 17 00:00:00 2001 From: Oliver Hamlet Date: Tue, 23 Dec 2014 23:28:15 +0000 Subject: [PATCH] Started to implement changes picked up from website. The drawer tabs have also been updated to follow the spec. Almost everything looks terrible at the moment though, due to conflicts with existing styling. --- resources/report/css/overrides.css | 168 ++++++++++++++++-- resources/report/css/style.css | 122 +++++++++---- resources/report/html/loot-plugin-card.html | 23 +-- resources/report/html/loot-plugin-editor.html | 24 +-- resources/report/js/script.js | 4 - resources/report/report.html | 12 +- 6 files changed, 246 insertions(+), 107 deletions(-) diff --git a/resources/report/css/overrides.css b/resources/report/css/overrides.css index 34c4db36..f4d4db61 100644 --- a/resources/report/css/overrides.css +++ b/resources/report/css/overrides.css @@ -1,15 +1,5 @@ /* These styles override Polymer's own internal styling for certain elements. */ -/* The following stops the main toolbar from overshadowing into the drawer. */ -#container::shadow #drawer { - z-index: 1; -} - -/* The following is for setting the size of the drawer in narrow mode. */ -#container::shadow .narrow-layout #drawer { - width: 50% !important; -} - /* These overrides change the colour of the game menu's text and underline. */ #gameMenu::shadow > paper-dropdown-menu { border-bottom-color: #64B5F6; @@ -59,14 +49,7 @@ html /deep/ paper-item[disabled] { pointer-events: none; } -/* These overrides change the colour of the tab ink effect and their underline. */ -html /deep/ paper-tabs::shadow #selectionBar { - background-color: #64B5F6; - height: 4px; -} -html /deep/ paper-tab::shadow #ink { - color: #64B5F6; -} + /* This override change the positioning of the progress dialog to adapt to content changes. */ #progressDialog { @@ -131,3 +114,152 @@ html /deep/ core-tooltip::shadow .core-tooltip { font-weight: 500; background-color: rgba(0, 0, 0, 0.9); } + + +/* paper-button */ +paper-button { + min-width: 88px; + height: 36px; + line-height: 36px; + margin: 6px 4px; +} +paper-button::shadow .button-content { + padding: 0 8px; +} +paper-button::shadow .button-content ::content a { + margin: 0 -8px; + padding: 0 8px; + -ms-flex: 1 1 auto; +} +/* paper-item */ +nav > paper-item, core-menu > paper-item { + color: rgba(0, 0, 0, 0.87); + height: 48px; + line-height: 48px; +} +nav > paper-item:first-child { + margin-top: 8px; +} +paper-item core-icon { + margin-right: 32px; + color: rgba(0, 0, 0, 0.54); +} +paper-item .avatar { + width: 40px; + height: 40px; + margin-right: 16px; + vertical-align: top; +} +paper-item::shadow .button-content { + padding: 0 16px; +} +paper-item::shadow .button-content ::content * { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +paper-item::shadow .button-content ::content a { + margin: 0 -16px; + padding: 0 16px; + -ms-flex: 1 1 auto; +} +/* paper-item (two-line) */ +paper-item.two-line { + height: 72px; +} +paper-item.two-line::shadow .button-content { + padding: 16px 16px; +} +paper-item.two-line::shadow .button-content ::content a { + margin: -16px -16px; + padding: 16px 16px; +} +paper-item.two-line .text { + /* Padding is disabled as otherwise text won't fit in correctly. */ + /*padding: 4px 0;*/ + line-height: normal; +} +paper-item.two-line .primary { + /* MD spec says 16sp, but that doesn't fit, so use 14sp. */ + /*font-size: 1.143rem;*/ + font-size: 1rem; +} +paper-item.two-line .secondary { + /* MD spec says 14sp, but that doesn't fit, so use 12sp. */ + /*font-size: 1rem; */ + font-size: 0.857rem; + color: rgba(0, 0, 0, 0.54); +} +/* paper-input-decorator */ +paper-input-decorator { + display: inline-block !important; + margin: 0 4px; +} +paper-input-decorator::shadow .underline .unfocused-underline { + /* line color when the input is unfocused */ + background-color: rgba(0, 0, 0, 0.12); +} +paper-input-decorator::shadow .underline .focused-underline { + /* line color when the input is focused */ + background-color: #64B5F6; +} +/* input */ +paper-input-decorator::shadow .label-text, +input::-webkit-input-placeholder { + color: rgba(0, 0, 0, 0.26); +} +::-moz-placeholder { + opacity: 1 !important; + color: rgba(0, 0, 0, 0.26) !important; +} +:-ms-input-placeholder { + color: rgba(0, 0, 0, 0.26) !important; +} + +/* paper-dropdown-menu */ +paper-dropdown-menu { + margin-left: 4px; + margin-right: 4px; + border-bottom: 1px solid rgba(0, 0, 0, 0.12); +} +paper-dropdown-menu::shadow #label { + color: rgba(0, 0, 0, 0.87); +} +paper-dropdown-menu::shadow #arrow { + color: rgba(0, 0, 0, 0.26); +} +paper-dropdown-menu .core-selected { + color: #64B5F6; + background-color: inherit; +} +/* paper-dropdown */ +paper-dropdown { + padding: 8px 0; +} +paper-dropdown::shadow #scroller { + /* The calculated height is too high for the content. */ + height: auto !important; +} +/* core-menu */ +core-menu { + margin: 0; +} +/* paper-tabs */ +html /deep/ paper-tabs::shadow #selectionBar { + background-color: #64B5F6; + height: 2px; +} +html /deep/ paper-tab::shadow #ink { + color: #64B5F6; +} +/* core-drawer-panel */ +#container::shadow #drawer { + z-index: 1; + /* 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;*/ +} +#container::shadow .narrow-layout #drawer { + width: calc(100vw - 56px) !important; +} diff --git a/resources/report/css/style.css b/resources/report/css/style.css index 65626e41..d8bae0bf 100644 --- a/resources/report/css/style.css +++ b/resources/report/css/style.css @@ -21,17 +21,90 @@ along with LOOT. If not, see . */ +html { + font:11pt/1.429 RobotoDraft, sans-serif; + color: rgba(0, 0, 0, 0.87); + 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 { + font-weight: 400; + font-size: 4rem; + color: rgba(0, 0, 0, 0.54); + /*letter-spacing: -0.005em;*/ +} +.display2 { + 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 { + font-weight: 400; + font-size: 1.714rem; + line-height: 1.333; +} +.title { + font-weight: 500; + font-size: 1.429rem; + /*letter-spacing: 0.005em;*/ +} +.subhead { + font-weight: 400; + font-size: 1.143rem; + line-height: 1.75; + /* Alternate line height: */ + /* line-height: 1.5; */ + /*letter-spacing: 0.01em;*/ +} +.body2, html /deep/ paper-tabs { + font-weight: 500; + font-size: 1rem; + line-height: 1.714; + /*letter-spacing: 0.01em;*/ +} +.body1 { + 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-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); +} + +/* Misc */ ::-webkit-scrollbar-corner { background: inherit; } body { - font: 10pt/1.5 RobotoDraft, Helvetica, sans-serif; - margin:0; background:#FAFAFA; - height: 100%; - color: rgba(0, 0, 0, 0.87); } -core-toolbar { +core-toolbar, div[drawer] > div:first-child { background: #3F51B5; color: white; height: 56px; @@ -40,17 +113,11 @@ core-toolbar { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); z-index: 1; } -#mainToolbar paper-dropdown { - color: black; -} -div[drawer] core-tooltip { - margin: 0 12px; -} div[drawer] { background: white; z-index: 1; } -div[drawer] > div, div[drawer] > core-toolbar { +div[drawer] > * { border-right: 1px rgba(0, 0, 0, 0.12) solid; } #main { @@ -62,40 +129,27 @@ div[drawer] > div, div[drawer] > core-toolbar { transform-style: preserve-3d; } #cardsNav { - margin: 0; overflow: auto; } -#cardsNav > paper-item, #cardsNav > loot-plugin-item { - /*height: 2em;*/ -} paper-item > a { -webkit-user-drag: none; - text-decoration: none; - color: black; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; } #searchBox { display: block; + margin: 0 16px; } section { - background:white; - margin:1em; + background: white; + margin: 8px; margin-bottom: 0; - padding:1em; + padding: 16px; border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px; } -#generalMessages { - margin-bottom: 0.5em; -} #about blockquote { white-space: pre; @@ -214,13 +268,3 @@ a { a:hover { text-decoration: underline; } - -/* This animates the drawer toggle appearing in narrow view. */ -#drawerToggle { - display: none; -} -@media screen and (max-width: 640px) { - #drawerToggle { - display: block; - } -} diff --git a/resources/report/html/loot-plugin-card.html b/resources/report/html/loot-plugin-card.html index 943d0a64..06d18899 100644 --- a/resources/report/html/loot-plugin-card.html +++ b/resources/report/html/loot-plugin-card.html @@ -32,7 +32,8 @@ loot-clear-metadata #wrapper { display: block; background:white; - margin: 0.5em 1em; + margin: 8px; + margin-bottom: 0; position: relative; border-top-left-radius: 2px; border-top-right-radius: 2px; @@ -89,7 +90,7 @@ loot-clear-metadata content::content > .tag, content::content > ul { display: block; - padding: 0 1em 1em; + padding: 0 16px 16px; } content::content > h1 { display: inline-block; @@ -99,12 +100,12 @@ loot-clear-metadata } content::content > .version { display: inline-block; - margin-left: 1em; + margin-left: 16px; color:#6394F8; } content::content > .crc { display: inline-block; - margin-left: 1em; + margin-left: 16px; color:#BC8923; } .hidden, @@ -120,19 +121,9 @@ loot-clear-metadata background: inherit; height: 56px; } - core-toolbar > div { - position: relative; - top: -0.15em; - } - paper-item:first-child::shadow .button-content { - padding: 0; - } paper-checkbox { padding: 0.9em 1em; } - core-icon { - vertical-align: inherit !important; - }
@@ -158,9 +149,7 @@ loot-clear-metadata
- - - + Edit Metadata diff --git a/resources/report/html/loot-plugin-editor.html b/resources/report/html/loot-plugin-editor.html index faff0a5a..89d85e66 100644 --- a/resources/report/html/loot-plugin-editor.html +++ b/resources/report/html/loot-plugin-editor.html @@ -72,17 +72,6 @@ loot-editor-close #enableEdits { margin-bottom: 1em; } - #priorityValue { - margin-left: 0.5em; - } - input[readonly] { - border: none; - -webkit-user-select: none; - } - input:invalid { - background-color: pink; - color: white; - } /* Table styling. */ table { @@ -93,10 +82,6 @@ loot-editor-close table:not(.core-selected), #main:not(.core-selected) { display: none; } - td input { - width: 100%; - text-overflow: ellipsis; - } td:last-child { cursor: pointer; } @@ -124,18 +109,11 @@ loot-editor-close background: #E8EAF6; height: 56px; } - core-toolbar > h1, core-toolbar > span { - position: relative; - top: -0.15em; - } #buttons { text-align: right; } #main { - padding: 1em; - } - core-icon { - vertical-align: inherit !important; + padding: 16px; } diff --git a/resources/report/js/script.js b/resources/report/js/script.js index 0e8333c4..78c6dda8 100644 --- a/resources/report/js/script.js +++ b/resources/report/js/script.js @@ -982,9 +982,6 @@ function handleClearMetadata(evt) { } }); } -function toggleDrawer(evt) { - document.getElementById('container').togglePanel(); -} function handleSidebarClick(evt) { if (evt.target.hasAttribute('data-index')) { window.location.hash = ''; @@ -1049,7 +1046,6 @@ function setupEventHandlers() { document.body.addEventListener('loot-copy-metadata', handleCopyMetadata, false); document.body.addEventListener('loot-clear-metadata', handleClearMetadata, false); - document.getElementById('drawerToggle').addEventListener('click', toggleDrawer, false); document.getElementById('cardsNav').addEventListener('click', handleSidebarClick, false); document.getElementById('cardsNav').addEventListener('dblclick', handleSidebarClick, false); } diff --git a/resources/report/report.html b/resources/report/report.html index 2793ea2e..2b853f1d 100644 --- a/resources/report/report.html +++ b/resources/report/report.html @@ -42,15 +42,15 @@
- - +
+ Plugins Filters - +
-
+
+
@@ -92,7 +92,7 @@
- +