/*
Copyright 2023 0xf8.dev@proton.me

This file is part of Galerie

Galerie 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.
Galerie 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 Galerie. If not, see <https://www.gnu.org/licenses/>.
*/

@import "style.scss";

div#container {
  display: flex;

  flex-direction: column;

  h2,
  h3 {
    text-align: center;
    margin-top: 2em;
  }

  div.status {
    @keyframes slowMovein {
      from { top: 1em; opacity: 0; }
      to { top: 3em; opacity: 1; }
    }

    margin: 0;
    padding: 0;

    animation: slowMovein 2s ease;

    position: absolute;
    width: 100vw;

    left: 5%;

    top: 3em;

    font-size: 1.2em;

    span {
      padding: .5em .4em;

      border: none;
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.2);

    }
  }
}

ul.settings {
  display: grid;

  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;

  list-style: none;
  padding: 0;

  li {
    display: flex;
    align-items: center;

    background-color: rgba(0, 0, 0, 0.1);

    input {
      background: rgba(0,0,0,0.1);
      color: white;

      font-size: 0.85em;
      font-weight: 500;

      padding: 0.2em 0.5em;

      border-radius: 10px;
      border: white 2px solid;
    }

    i {
      padding-left: 0.4em;
    }
  }

  li:nth-child(odd) {
    font-size: 1.3em;

    justify-self: right;

    padding: 0.2em 0.5em;
  }
  li:nth-child(even) {
    font-size: 1.1em;

    justify-self: left;

    padding: 0.5em;
  }
}