/*  LOOT

    A load order optimisation tool for Oblivion, Skyrim, Fallout 3 and
    Fallout: New Vegas.

    Copyright (C) 2013    WrinklyNinja

    This file is part of LOOT.

    LOOT is free software: you can redistribute
    it and/or modify it under the terms of the GNU General Public License
    as published by the Free Software Foundation, either version 3 of
    the License, or (at your option) any later version.

    LOOT is distributed in the hope that it will
    be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with LOOT.  If not, see
    <https://www.gnu.org/licenses/>.
*/
/* CSS Custom Variables */
:root {
  --state-transition-time: 0.6s;

  --primary-color: var(--paper-indigo-500);
  --light-primary-color: var(--paper-blue-50);
  --accent-color: var(--paper-blue-300);
  --dark-accent-color: var(--paper-blue-500);

  --primary-background-color: white;
  --primary-text-color: rgba(0, 0, 0, var(--dark-primary-opacity));
  --secondary-text-color: rgba(0, 0, 0, var(--dark-secondary-opacity));
  --disabled-text-color: rgba(0, 0, 0, var(--dark-disabled-opacity));
  --divider-color: rgba(0, 0, 0, var(--dark-divider-opacity));

  --dark-theme-text-color: white;
  --dark-theme-secondary-color: rgba(255, 255, 255, var(--light-secondary-opacity));
  --dark-theme-disabled-color: rgba(255, 255, 255, var(--light-disabled-opacity));
  --dark-theme-divider-color: rgba(255, 255, 255, var(--light-divider-opacity));

  --paper-icon-button-disabled-text: var(--dark-theme-disabled-color);
  --paper-tabs-selection-bar-color: var(--accent-color);
  --paper-tab-ink: var(--accent-color);

  width: 100%;
  height: 100%;
}

/* Misc */
a {
    color: var(--dark-accent-color);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
tt, code, kbd, samp {
    font-family: Consolas, monospace;
}

/* App bar */
app-toolbar {
  height: 56px;
  background: var(--primary-color);
  color: var(--dark-theme-text-color);
}
#mainToolbar,
#searchBar {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    z-index: 1;
}
#mainToolbar:not(.search) + #searchBar,
#mainToolbar.search {
    display: none;
}
#gameMenu {
  margin: 0 8px;
  width: 250px;
}
#applySortButton {
    color: var(--dark-accent-color);
    background-color: white;
}

/* Drawer / Sidebar */
app-drawer-layout:not([narrow]) [drawer-toggle] {
  display: none;
}
app-drawer {
    z-index: inherit;
}
app-drawer > * {
    border-right: 1px var(--divider-color) solid;
}
app-drawer > iron-pages {
  overflow: auto;
  height: calc(100% - 56px);
}
#cardsNav {
  padding-top: 8px;
  padding-bottom: 8px;
  will-change: transform;
}
#filters {
    padding: 8px 0;
    overflow: auto;
}
#filters > paper-checkbox,
#hiddenPlugins,
#hiddenMessages {
    padding: 0 16px;
    min-height: 48px;
    line-height: 48px;
}
#contentFilter,
#conflictsFilter {
    padding: 0 16px;
    min-height: 64px;
}
#conflictsFilter > paper-item {
  --paper-item-min-height: 36px;
  font-size: 1rem;
}

/* Panel */
app-drawer-layout > div {
    height: 100%;
}
#main {
    background-color: #fafafa;
    overflow: auto;
    position: relative;
    z-index: 0;
}
#main > iron-list {
    margin-bottom: 120px;
}
#summary {
    background-color: var(--primary-background-color);
    margin: 8px;
    padding: 16px;
}
#summary > h1 {
    margin: -16px 0 0;
    line-height: 56px;
    color: inherit;
}
#summary > table {
    display: inline-block;
    vertical-align: top;
    margin-right: 32px;
    width: auto;
    background-color: inherit;
    border-collapse: collapse;
}
#summary > table:last-child {
    margin-right: 0;
}
#summary td:last-child {
    text-align: right;
    padding-left: 16px;
}
#main li {
    padding: 8px 16px;
}
li p {
    margin: 0;
}
li.error {
    background: #FF8A80;
}
li.warn {
    background: #FFE082;
}
.version {
    color: #607D8B;
}
.crc {
    color: #795548;
}
.tag.current {
    color: silver;
}
.tag.add {
    color: #4CAF50;
}
.tag.remove {
    color: #F44336;
}
#editor {
    overflow: hidden;
}

/* Dialogs */
#about {
    max-width: 550px;
}
#about blockquote {
    white-space: pre-line;
}
#settingsDialog > paper-dialog-scrollable > div > * {
    margin: 16px;
}
#settingsDialog > paper-dialog-scrollable > div > div > :first-child {
    margin-right: 16px;
    margin-left: 0;
}
#settingsDialog > paper-dialog-scrollable > div > :last-child {
    margin-right: 0;
}
#gameTable {
    margin: 32px 0 0;
}
#progressDialog paper-progress {
    width: 100%;
}
#firstRun > ul {
    padding-left: 48px;
}

/* For Material Design generic dividers. */
.divider {
    height: 1px;
    background: var(--divider-color);
    margin-top: -1px;
}

/* 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;
}

/* Set icons to use Material Design colouring. */
iron-icon {
    color: var(--secondary-text-color);
}

/* For some reason paper-icon-button doesn't have hidden styling by default. */
paper-icon-button[hidden] {
    display: none;
}

/* Editable table */
editable-table td,
editable-table th {
  vertical-align: middle;
  text-align: left;
  padding: 0 7px;
}
editable-table th:first-child,
editable-table td:first-child {
  padding-left: 16px;
}
editable-table th:last-child,
editable-table td:last-child {
  padding-left: 0;
}
editable-table thead > tr {
  height: 56px;
}
editable-table tbody > tr {
  height: 48px;
}
editable-table th {
    color: var(--secondary-text-color);
    border-bottom: 1px solid var(--divider-color);
}
editable-table paper-icon-button {
    color: var(--secondary-text-color);
}
editable-table paper-icon-button[disabled] {
    color: var(--disabled-text-color);
}
editable-table paper-icon-button[icon=delete]:hover {
    color: red;
}
editable-table paper-icon-button[icon=add]:hover {
    color: green;
}
paper-dialog-scrollable::before {
    z-index: 1;
}
