/*
* Copyright (C) 2018  Calo001 <calo_lrc@hotmail.com>
* 
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published
* by the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
* 
* This program 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 Affero General Public License for more details.
* 
* You should have received a copy of the GNU Affero General Public License
* along with this program.  If not, see <http://www.gnu.org/licenses/>.
* 
*/

@import url("/com/github/calo001/fondo/css/animations.css");

@define-color gradientPrimary1 @accent_color;
@define-color gradientPrimary2 shade(@accent_color, 0.8);

@define-color semiTransparent alpha(@accent_color, 0.1);

@define-color photoLight1 alpha(@gradientPrimary1, 0.16);
@define-color photoLight2 alpha(@gradientPrimary1, 0.23);

.lateral-panel {
    background: alpha(@accent_color, 0.05);
    background: linear-gradient(
        90deg, 
        alpha(gray, 0.2) 0%, 
        alpha(gray, 0.1) 1%, 
        alpha(gray, 0.05) 8%
    );
    box-shadow: none;
    border: none;
}

.hphoto {
    font-weight: bold;
    font-size: 2.5em;
}

flowboxchild:focus {
	background: @semiTransparent;
}

progressbar trough {
    border: none;
    box-shadow: none;
    background: rgba (255,255,255,0.3);
    border-radius: 25px;
}

.link {
    border: none;
    background: none;
}

.autor {
    font-size: 1.3em;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    padding: 5px 10px;
    background: none;
}

.autor:hover {
    background-color: rgba(0,0,0,0.1);
}

.photo {
    background: none;
    border-radius: 6px;
    box-shadow: none;
    padding: 3px;
    border: none;
}

.button-clicked image {
    animation-name: zoom;
    animation-duration: 0.8s;
    animation-timing-function: ease-in-out;
}

.photo:hover {
    box-shadow: 0 14px 28px @photoLight1, 0 10px 10px @photoLight2;
    background: linear-gradient(
        -45deg, 
        @gradientPrimary2 0%, 
        @gradientPrimary1 100%
    );
    padding: 3px;
}

.photo:hover image {
    opacity: 0.9;
}

.backimg {
    background: linear-gradient(-45deg, @gradientPrimary2 0%, @gradientPrimary1 100%);
    padding: 1.5px;
    border-radius: 2px;
}

.gradient_back {
    animation-name: gradient_anim;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.start_anim {
    animation-name: opacity_anim;
    animation-duration: 0.5s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
}

.button-action {
    color: #FFFFFF;
    border: solid 0.8px white;
    border-radius: 20px;
    font-size: 1.3em;
    font-weight: bold;
	padding: 5px;
    box-shadow: none;
    background-color: rgba(0,0,0,0.2);
}

.button-action image {
    color: #FFFFFF;
}

.label_dimens {
    color: #FFFFFF;
    border-radius: 10px;
    font-size: 1em;
    font-weight: 600;
	padding: 5px;
    background-color: rgba(0,0,0,0.2);
}

.button-action:hover, .button-action:checked {
    background: linear-gradient(@gradientPrimary1, @gradientPrimary2);
    color: #FFFFFF;
    border: solid 0.8px @gradientPrimary1;
}

.button-action-popup {
	padding: 5px;
    background-color: rgba(0,0,0,0.2);
    font-weight: 600;
    border: 3px;
}

.button-action-popup:hover {
    background: linear-gradient(@gradientPrimary1, @gradientPrimary2);
    color: #FFFFFF;
}

.button-action-popup:focus {
    border: 1px solid alpha(@accent_color, 0.95);
}

.transition {
    transition: 200ms;
    transition-timing-function: linear;
}

.label_loading {
    color: white;
}

.card_spinner {
	border-radius: 50%;
	padding: 7px;
	border: none;
    box-shadow: 0 5px 8px rgba(0,0,0,0.19), 0 3px 3px rgba(0,0,0,0.23);
}

.prev-window {
    background:
    linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
    linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
    linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
    linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
    background-color: #131313;
    background-size: 20px 20px;
}

.btn-category {
    color: white;
    font-size: 2em;
    border-radius: 4px;
}

.btn-category:hover {
    opacity: 0.8;
}

.suggested-action {
    background: linear-gradient(@gradientPrimary1, @gradientPrimary2);
}

.btn_round {
    border-radius: 30px;
    font-weight: bold;
    font-size: 1.2em;
    padding: 4px;
}

.active {
    background: rgba(0,0,0,0.13);
    border-radius: 0%;
}

.active image {
  animation-name: fancy_turn;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out; 
}

.multiple_wallpaper_popup {
  padding: 1em;
  padding-bottom: 0;
}

.multiple_wallpaper_container {
  padding: 1em 0;
}

.mw_head {
  font-weight: bold;
  font-size: 1.2em;
  padding: 4px;
}

.multiple_wallpaper_popup .toggle:checked {
  background: alpha(@accent_color, 0.1);
  border: 0.5px solid @accent_color;
}

.multiple_wallpaper_popup .toggle {
	border-width: 0.5px;
}

.mw_info {
  font-size: 1.2em;
}

.action_suggest_btn {
  background: linear-gradient(@gradientPrimary1, @gradientPrimary2);
  color: #FFFFFF;
  border: none;
  padding: 0.5em;
}

.item_added image {
    animation-name: fancy_turn;
    animation-duration: 1s;
    animation-timing-function: ease-in-out; 
}

.btn-orientation {
  border-radius: 50%;
  padding: 2em;
  background: none;
  box-shadow: none;
  border: none;
}

.help {
  font-size: 0.9em;
  opacity: 0.7;
}

.image_grid {
  margin: 1.4em;
}

.btn-orientation:checked {
  background: rgba(255,255,255,0.1);
  box-shadow: 0 7px 12px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.btn-nature {
    background: linear-gradient(-45deg, #B5AC49, #11998E);
}

.btn_animal {
    background: linear-gradient(-45deg, #9B5F62, #DDA165);
}

.btn_food_drink {
    background: linear-gradient(-45deg, #FF5858, #F09819);
}

.btn_space {
    background: linear-gradient(-45deg, #29323C, #483874);
}

.btn_sport {
    background: linear-gradient(-45deg, #533D84, #7E2F77);
}

.btn_business_work {
    background: linear-gradient(-45deg, #3C171A, #5D293A);
}

.btn_fashion {
    background: linear-gradient(-45deg, #E16145, #FE337C);
}

.btn_arts_culture {
    background: linear-gradient(-45deg, #4481EB, #04BEFE);
}

.btn_architecture {
    background: linear-gradient(-45deg, #203A43, #2C645A);
}

.btn_technology {
    background: linear-gradient(-45deg, #D42900, #FF156A);
}

.btn_texture_pattern {
    background: linear-gradient(-45deg, #13547A, #42B18D);
}

.btn_flatlay {
    background: linear-gradient(-45deg, #AAA600, #E99C00);
}
