<commit_before>@import "defs.less";

#sidebar > .sidebar-tv {
	background: @COL_NDDDD;

	min-height: 3rem;

	& > .-active {
		position: relative;
		cursor: pointer;

		& > .-img {
			padding:0.5em;
			height: 0; // don't resize other than padding
			padding-bottom: 56.25%; // 16:9 ratio padding, to ensure size
			& > img {
				max-width:100%;
				display:block;
				position: absolute;
				height: 100%; // fill padding height for ratio
			}
		}
		& > .-live {
			position: absolute;
			left: 1em;
			top: 1em;
			/*text-shadow: 0 0 5px black;*/
			background: @COL_L;
			padding: 0 10px 0 5px;
			border-radius: 10px;

			& > svg {
				color: @COL_A;
				animation: blinker 10s linear infinite;
			}
			@keyframes blinker {
				5% { opacity: 1.0; }
				10% { opacity: 0.2; }
				15% { opacity: 1.0; }
			}

			& > span {
				color: @COL_D;
				font-weight: bold;
			}
		}
		& > .-name {
			position: absolute;
			left:1em;
			bottom:1em;

			padding:0.05em 0.5em;
			&.stream-twitch {
				background: rgb(100,65,165);
			}
			&.stream-youtube {
				background: rgb(230,33,23);
			}

			color: @COL_L;
			& > svg {
				font-size: 0.75em;
			}

			border-radius: 10px;
		}
		& > .-viewers {
			position: absolute;
			right:1em;
			top:1em;

			padding:0.05em 0.5em;
			background: fade(@COL_D, 100%);

			color: @COL_L;
			& > svg {
				font-size: 0.75em;
			}

			border-radius: 10px;
		}
		& > .-play {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			/*opacity:0.3;*/
			font-size: 3em;
			color: @COL_L;
			transition: all 0.2s;

			& > svg {
				display: block;
			}

			background: fade(@COL_D, 50%);
		}
		&:hover > .-play {
			font-size: 4em;
			background: @COL_A;
		}
		&:active > .-play {
			font-size: 2.5em;
		}
	}
	& > .-detail {
		/*margin-bottom:0.5em;*/
		margin-top: 1em;
		line-height:1.25em;
		height:2.5em;
		overflow: hidden;

		color: @COL_NL;

		& > svg {
			color: @COL_NDD;
			padding: 0 0.4em;
			display: block;

			position: relative;
		}
		& > .icon-quotes-left {
			top: 0em - 0.1em;
			float: left;
		}
		& > .icon-quotes-right {
			top: 2.5em - 0.9em;
			float: right;
		}

		& > div {
			overflow: hidden;
			font-style: italic;
		}
	}
	& > .-browse {
		display:flex;
		flex-wrap:nowrap;
		align-items:stretch;

		padding: 0.5em 0.25em 0.25em;

		& > div {
			width:100%;
			cursor:pointer;

			& > div {
				padding:0.25em;

				& > img {
					max-width:100%;
					display:block;
				}
			}

			&.selected {
				background: @COL_N;
			}
			&:hover,
			&:focus {
				background: @COL_A;
			}

		}
	}
}<commit_msg>Revert "Screenshot Aspect Ratio - Fixes #362"<commit_after>@import "defs.less";

#sidebar > .sidebar-tv {
	background: @COL_NDDDD;
	
	min-height: 3rem;

	& > .-active {
		position: relative;
		cursor: pointer;

		& > .-img {
			padding:0.5em;
			& > img {
				max-width:100%;
				display:block;
			}
		}
		& > .-live {
			position: absolute;
			left: 1em;
			top: 1em;
			/*text-shadow: 0 0 5px black;*/
			background: @COL_L;
			padding: 0 10px 0 5px;
			border-radius: 10px;

			& > svg {
				color: @COL_A;
				animation: blinker 10s linear infinite;
			}
			@keyframes blinker { 
				5% { opacity: 1.0; }
				10% { opacity: 0.2; }
				15% { opacity: 1.0; }
			}
			
			& > span {
				color: @COL_D;
				font-weight: bold;
			}
		}
		& > .-name {
			position: absolute;
			left:1em;
			bottom:1em;

			padding:0.05em 0.5em;
			&.stream-twitch {
				background: rgb(100,65,165);
			}
			&.stream-youtube {
				background: rgb(230,33,23);
			}

			color: @COL_L;
			& > svg {
				font-size: 0.75em;
			}

			border-radius: 10px;
		}
		& > .-viewers {
			position: absolute;
			right:1em;
			top:1em;
			
			padding:0.05em 0.5em;
			background: fade(@COL_D, 100%);

			color: @COL_L;
			& > svg {
				font-size: 0.75em;
			}

			border-radius: 10px;
		}
		& > .-play {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			/*opacity:0.3;*/
			font-size: 3em;
			color: @COL_L;
			transition: all 0.2s;
			
			& > svg {
				display: block;
			}
			
			background: fade(@COL_D, 50%);
		}
		&:hover > .-play {
			font-size: 4em;
			background: @COL_A;
		}
		&:active > .-play {
			font-size: 2.5em;
		}
	}
	& > .-detail {
		/*margin-bottom:0.5em;*/
		
		line-height:1.25em;
		height:2.5em;
		overflow: hidden;
		
		color: @COL_NL;
		
		& > svg {
			color: @COL_NDD;
			padding: 0 0.4em;
			display: block;
			
			position: relative;
		}
		& > .icon-quotes-left {
			top: 0em - 0.1em;
			float: left;
		}
		& > .icon-quotes-right {
			top: 2.5em - 0.9em;
			float: right;
		}
		
		& > div {
			overflow: hidden;
			font-style: italic;
		}
	}
	& > .-browse {
		display:flex;
		flex-wrap:nowrap;
		align-items:stretch;
		
		padding: 0.5em 0.25em 0.25em;
		
		& > div {
			width:100%;
			cursor:pointer;
			
			& > div {
				padding:0.25em;

				& > img {
					max-width:100%;
					display:block;
				}
			}
			
			&.selected {
				background: @COL_N;
			}
			&:hover,
			&:focus {
				background: @COL_A;
			}

		}
	}
}
{'fraction_non_alphanumeric': 0.17196187450357425, 'fraction_numerical': 0.05262112787926926, 'mean_word_length': 2.0197841726618706, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 51, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3798632', 'n_tokens_mistral': 2881, 'n_tokens_neox': 2138, 'n_words': 413}