Skip to content

Instantly share code, notes, and snippets.

@greystate
Last active March 6, 2023 09:47
Show Gist options
  • Save greystate/a2e90ade5e4a9679bd1f9db490293fc7 to your computer and use it in GitHub Desktop.
Save greystate/a2e90ade5e4a9679bd1f9db490293fc7 to your computer and use it in GitHub Desktop.
Overriding defaults with a layer
/**
* 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" />
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment