/* This file only to be used in storage/shaderlist.php as it overrides style.css */
/* Table background & positioning */
table {
	border: 1px solid #669;
	margin: 20px auto 10px auto;
	/* display: block; Causes weird part-border on top of table */
	border-collapse: collapse;
	width: auto;
	/* Text of cells and headers */
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10pt;
	/* Center text inside cells; also center the shader icon */
	text-align: center;
	/* Cell content does not determine column width */
	table-layout: fixed;
}
/* Turn off cell text wrapping, show ... for overflow */
table.slimDesc {
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Background for table header cells */
thead {
	background-color: #336;
}

/* Background for table content cells */
tbody {
	border: 0px;
	background-color: #112;
	cursor: default;
}

/* Table header cells */
th {
	border-top: 1px solid #669;
	padding: 2px 4px;
	font-weight: 900;
	white-space: nowrap;
}

/* Text-align these columns td to left:
	Shader Name, Author, Description, Links, XML Filename, Notes to left
	Doesn't support IE lower than 8 but who cares about IE
	Note: this is 1-based column number, so column id + 1... i.e. nth-child(4) is td for col3
*/
td:nth-child(2), td:nth-child(3), td:nth-child(4), td:nth-child(8), td:nth-child(12), td:nth-child(14) {
	text-align: left;
}

td {
	max-width: 80px;
	padding-top: 4px;
}

/* Column width and cells text, set in th tags only */

/* Shader icon */
.col0 { min-width: 40px; }
/* Shader name */
.col1 { min-width: 150px; text-align: left; }
/* Author */
.col2 { min-width: 150px; max-width: 150px; text-align: left; }
/* Description */
.col3 { width: auto; text-align: left; min-width: 40vw; }
/* Renderers */
.col4 { min-width: 175px; max-width: 175px; }
/* PS level */
.col5 { min-width: 75px; max-width: 75px;}
/* Samples */
.col6 { min-width: 200px; max-width: 200px; }
/* Download links */
.col7 { text-align: left; min-width: 150px; max-width: 150px; }
/* Includes, License */
.col8, .col12 { min-width: 85px; max-width: 85px; }
/* Release Date, Last Updated */
.col9, .col10 { min-width: 105px; max-width: 105px; }
/* XML Filename */
.col11 { text-align: left; min-width: 400px; max-width: 400px; }
/* Notes */
.col13 { width: auto; text-align: left; min-width: 30vw; }

/* col7 unavailable download links */
td:nth-child(8) {
	color: #6A9;
}
/* Shader icon: background is white, icon image is centered */
td:first-child {
	background: #FFF;
	border-right: 1px solid #696;
}
td > img {
	vertical-align: middle;
}
/* Extension icons: valid and invalid */
td:first-child:first-child .shaderIconValid {
	width: 24px;
	height: 24px;
	margin: 0 auto;
}
img.shaderIconValid {
	max-width: 32px;
	max-height: 32px;
	width: auto;
	height: 100%;
}

.ex {
	font-size: 12px;
	color: #39A;
	text-decoration: none;
}

.ex:hover {
	color: #3AC;
	text-decoration: underline;
}
/* Download links */
.dl, .dl_borked {
	color: #39A;
	text-decoration: none;
}
.dl:hover {
	color: #3AC;
	text-decoration: underline;
}

/* Borked download links (mispackaged shaders, or indirect links) */
.dl_borked {
	color: #7033AA;
}
.dl_borked:hover {
	color: #9033AA;
	text-decoration: underline;
}

/* Table content cells */
td {
	border-top: 1px solid #669;
	padding: 2px 4px;
	height: 12px;
}
/* Advanced container for Darkwire header */
#container_noborder {
	line-height: 1.0;
	margin: 10px auto;
}

div#filter {
	/* If you change filter border color, change the initial value hue in JS */
	border: 2px solid #F00;
	position: fixed;
	bottom: 0px;
	left: 10px;
	background-color: #002022;
}
div.filterFields {
	/* Hide by default, override later */
	display: none;
	/* Prevents squishing */
	flex-shrink: 0;
}
input.filterTopButton {
	height: 21px;
	margin-top: 4px;
	display: none; /* Hide by default, overridden in CSS later */
}
input#filterExpandButton {
	display: inline-block; /* But always show the filter open/close button */
	float: left;
    margin-left: 4px;
}
input#showAllColumns {
	font-weight: 600; /* Bold text */
}
/* left-to-right flex layout; scroll horizontal if needed */
div#filter.filterExpanded > div#filterTopBar {
	position: relative;
    height: 30px;
	display: flex;
	flex-direction: row;
	column-gap: 5px;
	/* Don't try wrapping the top bar */
	overflow: hidden;
	white-space: nowrap;
	/* do not consider scroll in padding-bottom, as scrollbar doesn't overlap it */
	padding: 0 5px 2px 0;
}
div#filter.filterExpanded > div#filterTopBar > * {
	display: flow;
}
div#filterTitle {
	text-align: center;
	font-size: 20px;
	font-weight: 800;
	margin-left: 32px; /* Past the floating expand button */
	white-space: nowrap;
}
/*	Add filter title text margin when filter is expanded.
	4px bottom to keep away from filter fields; auto on sides to center */
div#filter.filterExpanded > * > div#filterTitle {
    margin: 0 0 2px 0;
	/* Ignore sibling divs; use text centering as per parent div width */
    position: absolute;
    width: 100%;
	/* If window is narrow, this min-width keeps the title from overlapping the topbar buttons */
    min-width: 630px;
	/* Don't intercept the input tag presses just because it's later div than the buttons */
	pointer-events: none;
}
/* left-to-right flex layout; scroll horizontal if needed */
div#filter.filterExpanded > div#filterFieldsContainer {
	display: flex;
	flex-direction: row;
	/* move fields a bit away from horizontal scrollbar when filter is narrow */
	padding: 0 5px 5px 5px;
	column-gap: 5px;
	/* horizontal scrollbar if needed */
	overflow: auto hidden;
}
/* Show all buttons when filter open */
div#filter.filterExpanded > input.filterTopButton {
	display: inline-block;
}
div#filter.filterExpanded > div#filterFieldsContainer > div.filterFields {
	display: flow;
}
p#extlistFooter {
	font-size: small;
	margin-bottom: 50px;
}
p#extlistFooter > span {
	color: red;
}


/* Shader Previewer */
div#videoListContainer {
	width: fit-content;
	height: fit-content;
	display: flex;
	gap: 5px;
}
div.video_arrange_column {
	flex-direction: column;
}
div.video_arrange_row {
	flex-direction: row;
}

div.videoHolder {
	display: flow;
	/*	The recording small videos are cropped to 172x172,
		but actual content size is 171x171. Frame background color RGB 192,192,192. */
	width: 171px;
	height: 171px;
	background: #C0C0C0;
	display: grid;
	place-items: center;
}
div.videoHolder > * {
	grid-area: 1 / 1;
}
/* Small videos */
video.small {
	width: 172px;
	height: 172px;
	object-fit: cover; /* don't go bigger than parent */
}
/* Semi-transparent grey overlay */
div.video_overlay {
	width: 171px;
	height: 171px;
	display: none;
	z-index: 2;
	color: #FFF;
	text-align: center;
    align-content: center;
	font-size: xx-large;
	/* Click thru to vid element */
	pointer-events: none;
}
div.video_overlay_notplaying {
	display: block;
	background-color: rgba(255,255,255, 0.4);
	opacity: 0.8;
}

p.debug {
	display: none;
}