greystate · March 6, 2023 09:47
diff --git a/dabblet.css b/dabblet.css
 /**
 * Overriding defaults with a layer
 */
 html {
 background: #f06;
 background: linear-gradient(45deg, #f06, yellow);
 min-height: 100%;
 }

 /* These are "Unlayered Styles" */
 html body > input[type=text] {
 	font-size: 2rem;
 	border: 2px solid !important;
 	background: red;
 }

 /* This creates an "overrides" layer
 * Using !important is necessary to "win" over
 * the rules in the "Unlayered Styles".
 */
 @layer overrides {
 	input[type=text] {
 		font-size: 1rem !important;
 		border-width: 5px !important;
 		background: green  !important;
 	}
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
 <input type="text" />
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* Overriding defaults with a layer
	*/
	html {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	}

	/* These are "Unlayered Styles" */
	html body > input[type=text] {
	font-size: 2rem;
	border: 2px solid !important;
	background: red;
	}

	/* This creates an "overrides" layer
	* Using !important is necessary to "win" over
	* the rules in the "Unlayered Styles".
	*/
	@layer overrides {
	input[type=text] {
	font-size: 1rem !important;
	border-width: 5px !important;
	background: green !important;
	}
	}
	<!-- content to be placed inside <body>…</body> -->
	<input type="text" />