/**
 * @file liferea.css  Liferea rendering stylesheet
 *
 * Copyright (C) 2004-2024 Lars Windolf <lars.windolf@gmx.de>
 * Copyright (C) 2004 delusional <delusional@dx13.co.uk>
 *
 * 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 2 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, write to the Free Software Foundation, Inc.,
 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
 */

body {
	background: #GTK-COLOR-BASE;
	color: #GTK-COLOR-TEXT;
	padding:0;
	margin:0;
}

blockquote {
        border-left: 3px solid #GTK-COLOR-DARK;
        background: #GTK-COLOR-BG;
        padding: 6px;
        font-style: italic;
        margin: 5px 20px;
	clear:both;
}

a {
	color: #GTK-COLOR-NORMAL-LINK;
}

a:visited {
	color: #GTK-COLOR-VISITED-LINK;
}

dd {
	padding-left: 30px;
}

section,
div.content svg,
div.content img {
	max-width: 100%;
	height: auto !important;
}

/* HTML content extraction sometimes give us nav elements */
div.content nav {
	display: none;
}

figure, iframe {
	max-width: 100%;
	box-sizing: border-box;

	/* Note: object-fit would be best practice here, but it fails
	   on embedded Youtube videos (pushing the embed iframe far
	   to the right with the controls being not in the place
	   visually shown) */
}

div.content * img {
	border:0;
	margin:2px;
}

div.content img.thumbnail {
	border:0;
	margin-right:12px;
}

img.gravatar {
	/* gravatars have align="left" so we need proper margin */
	margin-right:12px;
}

#map img {
	/* OpenStreeMap map tiles must have no border */
	border:0px;
	margin:0px;
}

/* styles for the item description (currently also used for
   the feed description) */
table.itemhead, table.feedhead {
	margin:0;
	width:100%;
	border:0;
	border-bottom: 2px solid #GTK-COLOR-DARK;
	clear:both;
	color:#GTK-COLOR-TEXT;
}

.itemhead, .feedhead {
	background-color: #GTK-COLOR-MID;
}

table.itemhead * a.itemhead {
	text-decoration:none;
	color:#GTK-COLOR-TEXT;
	font-weight:bold;
}

table.itemhead * td {
	padding-top: 4px;
}

td.head_favicon {
	width: 20px;
	padding-left: 10px;
	vertical-align: middle;
}

td.head_title {
	padding:2px 5px;
	width: 100%;
	vertical-align: middle;
}

table.headmeta {
	background:#GTK-COLOR-BG;
	width:100%;
	border:0;
	border-bottom:#GTK-COLOR-MID solid 1px;
	margin:0;
}

table.headmeta td {
	padding:1px 6px 1px 12px;
	font-size:0.9em;
}

.hidden {
	visibility:hidden;
	display:none;
}

.author, .categories, .source {
        padding:0;
	margin-left:0;
        margin-right:12px;
}

.date {
	white-space:nowrap;
	text-align:right;
	padding-right:5px;
}

div.content, div.item_comments {
	padding:0px 6px 0px 12px;
}

div.comment {
	border:1px solid #GTK-COLOR-DARK;
	margin-bottom:5px;
}

div.comment_body {
	padding-left:6px;
	padding-right:6px;
}

div.comment_title {
	padding-left:6px;
	padding-right:6px;
	font-weight:bold;
	background:#GTK-COLOR-BG;
}

a.favicon {
	text-decoration:none;
}

a.favicon img {
	width:16px;
	border:0;
	margin:0;
	padding:0;
}

/* style for the feed fetch error box at the beginning
   of the feed description and for item comment feeds */
#errors {
	border:0;
	border-bottom:1px solid black;
	margin:12px 24px;
	padding:12px;
	background:#ffa;
	color:black;
	border:1px solid #GTK-COLOR-DARK;
}

#errors ul {
	list-style-type: none;
	padding-inline-start: 15px;
}

#errors * li {
	padding:1px;
}

pre.errorOutput {
	margin:10px 15px;
	padding:5px;
	border:2px solid #GTK-COLOR-DARK;
	background:#GTK-COLOR-LIGHT;
	overflow:auto;
}

del {
	text-decoration: line-through;
}

ins {
	text-decoration: underline;
}

/* namespace specific styles */

.slash {
	background:#60A080;
	padding-left:5px;
	padding-right:5px;
}

.slashSection, .slashDepartment {
	padding-right:2px;
	color:black;
}

.slashValue {
	padding-right:6px;
	color:white;
	font-weight:bold;
}

div.photoheader {
	margin:10px 0;
	padding-left:10px;
	padding-right:10px;
	background-color:#GTK-COLOR-DARK;
	color:#GTK-COLOR-TEXT;
}

.video-embed {
	position: relative;
	max-width: 700px;
	width: 100%;
	margin-bottom: 10px;
}

.video-embed .thumb {
	max-width: 700px;
	width: 100%;
}

.video-embed .play-btn {
	position: absolute;
	max-width: 700px;
	width: 100px;
	height: 100px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.video-embed .play-btn svg {
	transition: all .3s ease;
	fill: #fff;
}

.video-embed .play-btn:hover svg,
.video-embed .play-btn:focus svg {
	cursor: pointer;
	fill: #ddd;
}

#enclosureVideo video {
	background: black;
	min-width: 640px;
	min-height: 480px;
	max-width: 100%;
        height: auto;
        display: block;
}

// dark mode image glaring #1303 
@media (prefers-color-scheme: dark) {
  img {
    filter: brightness(.8) contrast(1.2);
  }
}