mirror of
https://github.com/loot/libloot.git
synced 2026-07-27 14:16:01 -07:00
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.
This commit is contained in:
Oliver Hamlet
@@ -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;
|
||||
}
|
||||
|
||||
@@ -21,17 +21,90 @@
|
||||
along with LOOT. If not, see
|
||||
<http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
</style>
|
||||
<div id="wrapper">
|
||||
<section id="front">
|
||||
@@ -158,9 +149,7 @@ loot-clear-metadata
|
||||
<paper-icon-button icon="more-vert"></paper-icon-button>
|
||||
<paper-dropdown class="dropdown" halign="right" opened="{{data.isMenuOpen}}">
|
||||
<div>
|
||||
<paper-item>
|
||||
<paper-checkbox id="showOnlyConflicts" label="Show Only Conflicts" checked="{{data.isConflictFilterChecked}}" flex></paper-checkbox>
|
||||
</paper-item>
|
||||
<paper-checkbox id="showOnlyConflicts" label="Show Only Conflicts" checked="{{data.isConflictFilterChecked}}" flex></paper-checkbox>
|
||||
<paper-item id="editMetadata">
|
||||
<core-icon icon="create"></core-icon>
|
||||
Edit Metadata
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
</style>
|
||||
<core-toolbar class="medium-tall">
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -42,15 +42,15 @@
|
||||
<body oncontextmenu="return false" unresolved fullbleed vertical layout >
|
||||
<core-drawer-panel id="container" drawerWidth="33%">
|
||||
<div drawer vertical layout>
|
||||
<core-toolbar>
|
||||
<paper-tabs id="sidebarTabs" selected="cardsNav" valueattr="data-id">
|
||||
<div layout horizontal end>
|
||||
<paper-tabs id="sidebarTabs" selected="cardsNav" valueattr="data-id" flex>
|
||||
<paper-tab data-id="cardsNav">Plugins</paper-tab>
|
||||
<paper-tab data-id="filters">Filters</paper-tab>
|
||||
</paper-tabs>
|
||||
</core-toolbar>
|
||||
</div>
|
||||
<div flex layout vertical>
|
||||
<core-animated-pages selected="cardsNav" valueattr="id" transitions="" flex>
|
||||
<div id="cardsNav" class="tab-content" layout vertical>
|
||||
<nav id="cardsNav" class="tab-content" layout vertical>
|
||||
<paper-item>
|
||||
<a href="#summary"></a>Summary
|
||||
</paper-item>
|
||||
@@ -65,7 +65,7 @@
|
||||
</template>
|
||||
<!-- Generated <loot-plugin-item> elements go here. -->
|
||||
</core-list>
|
||||
</div>
|
||||
</nav>
|
||||
<div id="filters" class="tab-content" flex>
|
||||
<paper-checkbox id="hideVersionNumbers" data-class="version" label="Hide version numbers"></paper-checkbox>
|
||||
<paper-checkbox id="hideCRCs" data-class="crc" label="Hide CRCs"></paper-checkbox>
|
||||
@@ -92,7 +92,7 @@
|
||||
</div>
|
||||
<div main layout vertical>
|
||||
<core-toolbar id="mainToolbar">
|
||||
<paper-icon-button icon="menu" id="drawerToggle"></paper-icon-button>
|
||||
<paper-icon-button icon="menu" id="drawerToggle" core-drawer-toggle></paper-icon-button>
|
||||
<loot-dropdown-menu id="gameMenu">
|
||||
<!-- Generated game <li> elements go here. -->
|
||||
</loot-dropdown-menu>
|
||||
|
||||
Reference in New Issue
Block a user