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 @@
-
-