mirror of
https://github.com/loot/libloot.git
synced 2026-07-27 14:16:01 -07:00
Everything in app bar now displays correctly.
This commit is contained in:
Oliver Hamlet
@@ -1,54 +1,14 @@
|
||||
/* These styles override Polymer's own internal styling for certain elements. */
|
||||
|
||||
/* These overrides change the colour of the game menu's text and underline. */
|
||||
#gameMenu::shadow > paper-dropdown-menu {
|
||||
border-bottom-color: #64B5F6;
|
||||
}
|
||||
#gameMenu[disabled]::shadow > paper-dropdown-menu {
|
||||
border-bottom-color: rgba(100, 181, 246, 0.26);
|
||||
}
|
||||
#gameMenu::shadow > paper-dropdown-menu::shadow #arrow {
|
||||
color: #64B5F6;
|
||||
}
|
||||
#gameMenu[disabled]::shadow > paper-dropdown-menu::shadow #arrow {
|
||||
color: rgba(100, 181, 246, 0.26);
|
||||
}
|
||||
#gameMenu {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
#gameMenu::shadow > paper-dropdown-menu::shadow #label {
|
||||
color: white;
|
||||
}
|
||||
#gameMenu[disabled]::shadow > paper-dropdown-menu::shadow #label {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* This makes sidebar items smaller. */
|
||||
#cardsNav /deep/ paper-item {
|
||||
/*font-size: 1em;*/
|
||||
}
|
||||
#cardsNav /deep/ paper-item::shadow .button-content {
|
||||
padding: 0.4em 1em;
|
||||
}
|
||||
#cardsNav loot-plugin-item::shadow > paper-item::shadow .button-content {
|
||||
padding: 0.12em 1em;
|
||||
}
|
||||
|
||||
/* This override adds separator menu items. */
|
||||
html /deep/ paper-item[separator] {
|
||||
height: 1px;
|
||||
min-height: 1px;
|
||||
margin: 10px 0;
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* This override disable menu items. */
|
||||
/* Change color of disabled menu items to match Material Design spec. */
|
||||
html /deep/ paper-item[disabled] {
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Change color of disabled icon buttons to match Material Design spec. */
|
||||
paper-icon-button[disabled] {
|
||||
color: rgba(255, 255, 255, 0.30);
|
||||
}
|
||||
|
||||
|
||||
/* This override change the positioning of the progress dialog to adapt to content changes. */
|
||||
@@ -66,45 +26,11 @@ html /deep/ core-animated-pages {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* This stops menus keeping the last item clicked highlighted. */
|
||||
paper-item.core-selected {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
/* This styles divs like core-menus. */
|
||||
html /deep/ paper-dropdown > div {
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
/* Center paper-dropdown-menu text better. */
|
||||
html /deep/ paper-dropdown-menu {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* This adds padding between icons and text in menus. */
|
||||
html /deep/ paper-item > core-icon {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
/* This makes checkboxes have the same padding as icons in lists. */
|
||||
html /deep/ paper-checkbox::shadow #checkboxLabel {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
/* This makes the medium-tall toolbars 2x the 56px height, rather than the 64px height. */
|
||||
html /deep/ core-toolbar.medium-tall {
|
||||
height: 112px;
|
||||
}
|
||||
|
||||
/* Change color of disabled icon buttons to match Material Design spec. */
|
||||
paper-icon-button[disabled] {
|
||||
color: rgba(255, 255, 255, 0.30);
|
||||
}
|
||||
|
||||
/* This makes inputs display overflowing values with ellipsis. */
|
||||
html /deep/ input {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
||||
/* core-tooltip */
|
||||
@@ -114,136 +40,123 @@ html /deep/ core-tooltip::shadow .core-tooltip {
|
||||
font-weight: 500;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
|
||||
/* paper-button */
|
||||
paper-button {
|
||||
html /deep/ paper-button {
|
||||
min-width: 88px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
margin: 6px 4px;
|
||||
}
|
||||
paper-button::shadow .button-content {
|
||||
html /deep/ paper-button::shadow .button-content {
|
||||
padding: 0 8px;
|
||||
}
|
||||
paper-button::shadow .button-content ::content a {
|
||||
html /deep/ 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 {
|
||||
html /deep/ paper-item, html /deep/ core-menu > paper-item {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
nav > paper-item:first-child {
|
||||
html /deep/ paper-item:first-child {
|
||||
margin-top: 8px;
|
||||
}
|
||||
paper-item core-icon {
|
||||
html /deep/ paper-item core-icon {
|
||||
margin-right: 32px;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
paper-item .avatar {
|
||||
html /deep/ paper-item .avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 16px;
|
||||
vertical-align: top;
|
||||
}
|
||||
paper-item::shadow .button-content {
|
||||
html /deep/ paper-item::shadow .button-content {
|
||||
padding: 0 16px;
|
||||
}
|
||||
paper-item::shadow .button-content ::content * {
|
||||
html /deep/ paper-item::shadow .button-content ::content * {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
paper-item::shadow .button-content ::content a {
|
||||
html /deep/ 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;
|
||||
/* paper-input-decorator & input */
|
||||
html /deep/ paper-input-decorator {
|
||||
margin: 0 4px;
|
||||
}
|
||||
paper-input-decorator::shadow .underline .unfocused-underline {
|
||||
html /deep/ 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 {
|
||||
html /deep/ 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 {
|
||||
html /deep/ paper-input-decorator::shadow .label-text,
|
||||
html /deep/ input::-webkit-input-placeholder {
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
::-moz-placeholder {
|
||||
html /deep/ ::-moz-placeholder {
|
||||
opacity: 1 !important;
|
||||
color: rgba(0, 0, 0, 0.26) !important;
|
||||
}
|
||||
:-ms-input-placeholder {
|
||||
html /deep/ :-ms-input-placeholder {
|
||||
color: rgba(0, 0, 0, 0.26) !important;
|
||||
}
|
||||
html /deep/ input {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* paper-dropdown-menu */
|
||||
paper-dropdown-menu {
|
||||
html /deep/ paper-dropdown-menu {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
border-bottom-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
paper-dropdown-menu::shadow #label {
|
||||
html /deep/ paper-dropdown-menu::shadow #label {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
paper-dropdown-menu::shadow #arrow {
|
||||
html /deep/ paper-dropdown-menu[disabled]::shadow #label,
|
||||
html /deep/ paper-dropdown-menu::shadow #arrow {
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
paper-dropdown-menu .core-selected {
|
||||
html .dark /deep/ paper-dropdown-menu {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
html .dark /deep/ paper-dropdown-menu::shadow #label {
|
||||
color: white;
|
||||
}
|
||||
html .dark /deep/ paper-dropdown-menu[disabled]::shadow #label,
|
||||
html .dark /deep/ paper-dropdown-menu::shadow #arrow {
|
||||
color: rgba(255, 255, 255, 0.30);
|
||||
}
|
||||
html /deep/ loot-dropdown-menu .core-selected,
|
||||
html /deep/ paper-dropdown-menu .core-selected {
|
||||
color: #64B5F6;
|
||||
background-color: inherit;
|
||||
}
|
||||
/* paper-dropdown */
|
||||
paper-dropdown {
|
||||
html /deep/ paper-dropdown {
|
||||
padding: 8px 0;
|
||||
}
|
||||
paper-dropdown::shadow #scroller {
|
||||
html /deep/ paper-dropdown::shadow #scroller {
|
||||
/* The calculated height is too high for the content. */
|
||||
height: auto !important;
|
||||
}
|
||||
/* core-menu */
|
||||
core-menu {
|
||||
html /deep/ core-menu {
|
||||
margin: 0;
|
||||
}
|
||||
html /deep/ core-menu .core-selected {
|
||||
background-color: inherit;
|
||||
}
|
||||
/* paper-tabs */
|
||||
html /deep/ paper-tabs::shadow #selectionBar {
|
||||
background-color: #64B5F6;
|
||||
@@ -253,13 +166,13 @@ html /deep/ paper-tab::shadow #ink {
|
||||
color: #64B5F6;
|
||||
}
|
||||
/* core-drawer-panel */
|
||||
#container::shadow #drawer {
|
||||
core-drawer-panel::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 {
|
||||
core-drawer-panel::shadow .narrow-layout #drawer {
|
||||
width: calc(100vw - 56px) !important;
|
||||
}
|
||||
|
||||
@@ -61,7 +61,7 @@ html {
|
||||
font-size: 1.429rem;
|
||||
/*letter-spacing: 0.005em;*/
|
||||
}
|
||||
.subhead {
|
||||
.subhead, html /deep/ paper-item {
|
||||
font-weight: 400;
|
||||
font-size: 1.143rem;
|
||||
line-height: 1.75;
|
||||
@@ -69,7 +69,7 @@ html {
|
||||
/* line-height: 1.5; */
|
||||
/*letter-spacing: 0.01em;*/
|
||||
}
|
||||
.body2, html /deep/ paper-tabs {
|
||||
.body2, html /deep/ paper-tabs, html /deep/ paper-menu-button paper-item {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
line-height: 1.714;
|
||||
@@ -113,6 +113,9 @@ core-toolbar, div[drawer] > div:first-child {
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
z-index: 1;
|
||||
}
|
||||
#gameMenu {
|
||||
margin-top: -0.5em;
|
||||
}
|
||||
div[drawer] {
|
||||
background: white;
|
||||
z-index: 1;
|
||||
@@ -268,3 +271,10 @@ a {
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* For Material Design generic dividers. */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
<div main layout vertical>
|
||||
<core-toolbar id="mainToolbar">
|
||||
<paper-icon-button icon="menu" id="drawerToggle" core-drawer-toggle></paper-icon-button>
|
||||
<loot-dropdown-menu id="gameMenu">
|
||||
<loot-dropdown-menu id="gameMenu" class="title dark">
|
||||
<!-- Generated game <li> elements go here. -->
|
||||
</loot-dropdown-menu>
|
||||
<span flex></span>
|
||||
@@ -108,47 +108,47 @@
|
||||
<paper-menu-button>
|
||||
<paper-icon-button icon="more-vert"></paper-icon-button>
|
||||
<paper-dropdown class="dropdown" halign="right">
|
||||
<div>
|
||||
<paper-item id="redatePluginsButton">
|
||||
<core-menu>
|
||||
<paper-item id="redatePluginsButton" noink>
|
||||
<core-icon icon="today"></core-icon>
|
||||
Redate Plugins
|
||||
</paper-item>
|
||||
<paper-item id="wipeUserlistButton">
|
||||
<paper-item id="wipeUserlistButton" noink>
|
||||
<core-icon icon="delete"></core-icon>
|
||||
Clear All User Metadata
|
||||
</paper-item>
|
||||
<paper-item id="copyContentButton">
|
||||
<paper-item id="copyContentButton" noink>
|
||||
<core-icon icon="content-copy"></core-icon>
|
||||
Copy Content
|
||||
</paper-item>
|
||||
<paper-item id="refreshContentButton">
|
||||
<paper-item id="refreshContentButton" noink>
|
||||
<core-icon icon="cached"></core-icon>
|
||||
Refresh Content
|
||||
</paper-item>
|
||||
<paper-item separator></paper-item>
|
||||
<paper-item id="settingsButton">
|
||||
<div class="divider"></div>
|
||||
<paper-item id="settingsButton" noink>
|
||||
<core-icon icon="settings"></core-icon>
|
||||
Settings
|
||||
</paper-item>
|
||||
<paper-item separator></paper-item>
|
||||
<paper-item id="helpButton">
|
||||
<div class="divider"></div>
|
||||
<paper-item id="helpButton" noink>
|
||||
<core-icon icon="book"></core-icon>
|
||||
View Documentation
|
||||
</paper-item>
|
||||
<paper-item id="openLogButton">
|
||||
<paper-item id="openLogButton" noink>
|
||||
<core-icon icon="folder"></core-icon>
|
||||
Open Debug Log Location
|
||||
</paper-item>
|
||||
<paper-item id="aboutButton">
|
||||
<paper-item id="aboutButton" noink>
|
||||
<core-icon icon="help"></core-icon>
|
||||
About
|
||||
</paper-item>
|
||||
<paper-item separator></paper-item>
|
||||
<paper-item id="quitButton">
|
||||
<div class="divider"></div>
|
||||
<paper-item id="quitButton" noink>
|
||||
<core-icon icon="close"></core-icon>
|
||||
Quit
|
||||
</paper-item>
|
||||
</div>
|
||||
</core-menu>
|
||||
</paper-dropdown>
|
||||
</paper-menu-button>
|
||||
</core-toolbar>
|
||||
|
||||
Reference in New Issue
Block a user