achmizs
/
AlwaysKillSticky


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
							<!DOCTYPE html>
<html>
<head>
	<title>Always Kill Sticky - Options</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<style>
		html {
			box-sizing: border-box;
			font-size: 16px;
		}
		*, *::before, *::after {
			box-sizing: inherit;
		}
		body {
			margin: 0 auto;
			display: flex;
			flex-flow: column;
			max-width: 640px;
			min-height: 100vh;
			padding: 10px;
			font-size: 1rem;
		}
		body > div {
			border: 1px solid #ddd;
			padding: 30px 15px 15px 15px;
			position: relative;
		}
		body > div + div {
			margin: 2.5em 0 0 0;
		}
		h1 {
			border-bottom: 1px solid #ddd;
			margin: 0.5em 0;
		}
		h2 {
			margin: 0;
			background-color: #fff;
			padding: 10px 15px;
			position: absolute;
			top: calc(-1 * (0.625em + 10px));
			left: 10px;
			border: inherit;
		}
		textarea {
			border: 1px solid #aaa;
			font-family: Inconsolata, Courier, monospace;
			font-size: 1.125rem;
			width: 100%;
			display: block;
		}
		#matchingPatterns textarea {
			min-height: 300px;
		}
		#exclusionPatterns textarea {
			min-height: 150px;
		}
		form {
			text-align: right;
			margin: 0 0 2.5em 0;
			display: flex;
			align-items: center;
		}
		form .buttons {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex: 1 1 0;
		}
		button {
			-webkit-appearance: none;
			-moz-appearance: none;
			border: 1px solid #bbb;
			color: #fff;
			padding: 10px 16px;
			cursor: default;
			margin: 0 0 0 0.5em;
		}
		button.save-button {
			background-color: #16e;
			font-size: 1.5rem;
		}
		button.reset-button {
			background-color: #d3453d;
			font-size: 1rem;
		}
		button:active {
			transform: scale(0.95);
		}
		button:focus:active {
			outline: none;
		}
		button:disabled {
			background-color: #777;
			opacity: 0.3;
		}
		input#whitelist-mode {
			display: block;
			-webkit-appearance: none;
			-moz-appearance: none;
			border: 1px solid #000;
			font-size: 1rem;
			height: 2em;
			width: 4em;
			margin: 0 6px;
			background-color: #000;
			box-shadow: 
				-2em 0 0 1px #fff inset,
				0 0 0 3px #fff inset;
		}
		input#whitelist-mode:checked {
			border: 1px solid #fff;
			background-color: #fff;
			box-shadow: 
				2em 0 0 1px #000 inset,
				0 0 0 3px #000 inset;
		}
		input#whitelist-mode,
		.mode-select-container span {
			cursor: pointer;
		}
		.mode-select-container {
			white-space: nowrap;
			display: flex;
			align-items: center;
			align-self: flex-start;
			border: 1px solid #ddd;
			padding: 8px 10px;
			cursor: default;
			background-color: #fff;
		}
		.mode-select-container.whitelist {
			background-color: #000;
			color: #fff;
		}
		.mode-select-container:not(.whitelist) .blacklist-mode-label,
		.mode-select-container.whitelist .whitelist-mode-label {
			border-bottom: 1px dotted currentColor;
		}
		.mode-select-container span::selection {
			background-color: transparent;
		}
		.mode-select-container span.disabled {
			pointer-events: none;
		}
		.mode-select-container span:not(.disabled):hover {
			border-bottom: 1px solid currentColor;
		}
		form button:not(:disabled):hover {
			text-shadow:
				0 0 1px #fff,
				0 0 3px #fff,
				0 0 5px #fff;
			cursor: pointer;
		}
		#matchingPatterns.disabled h2 {
			color: rgba(0,0,0,0.15);
		}
		#matchingPatterns.disabled p {
			opacity: 0.2;
		}
		#matchingPatterns.disabled .textarea-container {
			position: relative;
		}
		#matchingPatterns.disabled .textarea-container::before {
			content: ".*";
			display: flex;
			position: absolute;
			background-color: rgba(232,232,232,0.9);
			width: 100%;
			height: 100%;
			z-index: 1;
			justify-content: center;
			align-items: center;
			font-family: Inconsolata, Courier, monospace;
			font-size: 4em;
		}
		body > p {
			padding: 0 15px;
		}
	</style>
</head>
<body>
	<h1>Always Kill Sticky</h1>
	<form>
		<span class='mode-select-container'>
			<span class='blacklist-mode-label'>Blacklist mode</span>
			<input type='checkbox' id='whitelist-mode'></input>
			<span class='whitelist-mode-label'>Whitelist mode</span>
		</span>
		<span class='buttons'>
			<button disabled type='button' class='reset-button'>Reset</button>
			<button disabled type='button' class='save-button'>Save</button>
		</span>
	</form>
	<div id='matchingPatterns'>
		<h2>Matching patterns</h2>
		<p>Kill stickies on web page URLs matching the following <a href='https://regexr.com/' rel='nofollow'>regular expressions</a> (one per line):</p>
		<div class='textarea-container'>
			<textarea spellcheck="false"></textarea>
		</div>
	</div>
	<div id='exclusionPatterns'>
		<h2>Exclusion patterns</h2>
		<p>Do <strong>not</strong> kill stickies on web page URLs matching the following <a href='https://regexr.com/' rel='nofollow'>regular expressions</a> (one per line):</p>
		<div class='textarea-container'>
			<textarea spellcheck="false"></textarea>
		</div>
	</div>
	<p>NOTE: Exclusion patterns override matching patterns; if a page is <em>both</em> matched <em>and</em> excluded, stickies will <strong>not</strong> be killed on that page.</p>
</body>
<script src="options.js"></script>
</html>