mirror of
https://github.com/loot/libloot.git
synced 2026-07-27 14:16:01 -07:00
Update CSS
This commit is contained in:
Oliver Hamlet
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
+29
-60
@@ -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 <https://github.com/PolymerElements/paper-item/issues/71> */
|
||||
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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user