/* style.css
 *
 * Copyright 2021-2023 Frederick Schenk
 *
 * This program 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.
 *
 * 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 General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

/**
 * Custom styles used by Cawbird.
 */

/**
 * Custom accent colors for specific platforms.
 */
@define-color platform_mastodon #5E54EB;

/**
 * Removes the underline from selected links.
 */
link.hashtag, link.mention, link.weblink {
  text-decoration: none;
}

/**
 * Allows for a larger spinner on InitWindow.
 */
spinner.large {
  min-width: 28px;
  min-height: 28px;
}

/**
 * Reduced horizontal padding on non-selected button.
 */
button.condense {
  padding: 4px 6px;
}

/**
 * A smaller button used inside of content.
 */
button.inline {
  padding: 1px 2px;
  border-radius: 50px;
}
button.inline image {
  color: @borders;
}

/**
 * Balance the rounded corners on hover with not resizing
 * by using padding and negative margins
 */
button.flat.inline {
  padding: 1px 10px;
  margin: 0 -8px 0 -8px;
}
/**
 * Reduce the right margin to make "button with image" layout
 * more closely match "text-only" layout
 */
button.flat.inline image{
  margin-right: -4px;
}

/**
 * Buttons used to select filters.
 */
button.filter-pill {
  border-radius: 50px;
  padding: 1px 12px;
}
button.filter-pill:checked {
  color: @accent_color;
}

/**
 * A button used to select a avatar.
 */
button.avatar-button {
  border-radius: 9999px;
}

/**
 * Backgrounds colored in the platform color.
 */
.mastodon-background {
  color: white;
  background-color: @platform_mastodon;
}

/**
 * An image displaying an specific platform.
 */
image.platform-indicator {
  padding: 2px;
  border-radius: 25%;
  color: white;
}

/**
 * Button-style for media, quotes, etc. without padding
 */
button.no-padding {
  padding: 0px;
  margin: 0px;
}

/**
 * Styles for the indicator box, using a pill.
 */
box.indicator {
  padding: 6px;
  border-radius: 15px;
}
box.indicator > image {
  margin-left: 3px;
  margin-right: 3px;
}

/**
 * Styles for badges, using separate, circular indicators.
 */
badge {
  border-radius: 50%;
  padding: 3px;
  color: @light_1;
}

badge.verified {
  background: @blue_3;
}

badge.bot {
  background: @dark_2;
}

badge.protected {
  background: @orange_3;
}

/**
 * Makes a AdwAvatar square.
 */
widget.squared > avatar {
  border-radius: 5%;
}

/**
 * Displays a grey background before a picture is shown.
 */
.placeholder {
  background: @dark_1;
}

/**
 * Style for the SessionSidebar.
 */
list.session-list {
  background-color: transparent;
}
list.session-list > row {
  padding: 4px 0px;
  border-radius: 8px;
}
list.session-list > row.option-row > box.header {
  min-height: 0px;
}

/**
 * Style for the Collections, based on ListViews navigation-sidebar.
 */
listview.post-list {
  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background-color: transparent;
  padding: 12px;
}
listview.post-list > row {
  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 12px;
  padding: 0px;
}

/**
 * Style for a warning row in the CollectionView.
 */
row.warning {
  border-radius: 12px;
  margin: 12px;
  background-color: @warning_bg_color;
  color: @warning_fg_color;
}

/**
 * Remove padding and rounded corners on small sizes.
 */
listview.post-list.small {
  padding: 0px;
}
listview.post-list.small > row {
  border-radius: 0px;
}

/**
 * Styles for preferences rows doing a destructive action.
 */
row.destructive-action {
  color: @destructive_bg_color;
  background-color: transparent;
}
row.destructive-action:hover {
  background-color: alpha(currentColor, .07);
}
row.destructive-action:active {
  background-color: alpha(currentColor, .16);
}

/**
 * Widgets which corners are round on large clamps.
 */
.roundable {
  border-radius: 12px;
}

clamp > .small .roundable {
  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 0;
}

/**
 * Special style for UserDataDisplay.
 */
UserDataDisplay.verified {
  color: @success_color;
}

/**
 * An animated gradient, used to display a loading media.
 */
.loading-media {
  background: linear-gradient(90deg, alpha(@dark_1, 0.25), alpha(@light_2, 0.5), alpha(@dark_1, 0.25));
  background-size: 200% 100%;
  animation: animated-loading 5s linear infinite;
}

@keyframes animated-loading {
  0% {
    background-position:0% 50%;
  }
  50% {
    background-position:100% 50%;
  }
  100% {
    background-position:0% 50%;
  }
}

/**
 * Fades in an element (used to show .loading-media).
 */
.fade-in {
  animation: fading-in 1s forwards;
}

@keyframes fading-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/**
 * Fades out an element (used to hide .loading-media).
 */
.fade-out {
  animation: fading-out 1s forwards;
}

@keyframes fading-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/**
 * Colours for active action buttons
 *
 * We use Adwaita named colours, so themes will use those colours
 * if defined, or fall back to black and we rely on shape differences
 * for accessibility.
 */
buttoncontent.liked image {
  color: @red_4;
}

buttoncontent.reposted image {
  color: @blue_4;
}
