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..44a62702 100644
--- a/src/gui/html/css/typography.css
+++ b/src/gui/html/css/typography.css
@@ -125,80 +125,10 @@ html {
font-weight: 400;
text-rendering: optimizeLegibility;
}
-.display4 {
- font-weight: 300;
- font-size: 8rem;
+h1 {
+ font-weight: 400;
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, 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);
}