back to css playground
This commit is contained in:
parent
480b87009c
commit
56a9afd6f7
|
@ -158,6 +158,8 @@ input#d:checked ~ div {
|
|||
--fg0: var(--b00);
|
||||
--rfg: var(--b1);
|
||||
--hl: var(--g);
|
||||
--b03: var(--bg);
|
||||
--b2: hsl(218,15%,23%);
|
||||
}
|
||||
input#d:checked ~ div img {
|
||||
filter: brightness(0.7) saturate(0.5);
|
||||
|
@ -169,6 +171,39 @@ input#d:checked ~ div pre {
|
|||
|
||||
em,strong,b,i,h1,h2,h3,h4,h5,h6 { color: var(--rfg); }
|
||||
|
||||
|
||||
/* geek checked */
|
||||
input#g:checked ~ div {
|
||||
--y: #6A0;
|
||||
--o: #8A0;
|
||||
--r: #AA0;
|
||||
--m: #6A6;
|
||||
--v: #4A8;
|
||||
--b: #0A8;
|
||||
--c: #0A4;
|
||||
--g: #0A0;
|
||||
--bg: #020;
|
||||
--rbg: #040;
|
||||
--fg: #0B0;
|
||||
--fg0: #090;
|
||||
--rfg: #0C0;
|
||||
--hl: #0D0;
|
||||
--b03: #020;
|
||||
--b2: #080;
|
||||
font-family: Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
input#g:checked ~ div img {
|
||||
filter: brightness(0.8) sepia(100%) hue-rotate(55deg) saturate(3);
|
||||
}
|
||||
input#g:checked ~ div pre {
|
||||
background: var(--bg);
|
||||
border-color: var(--rbg);
|
||||
}
|
||||
|
||||
em,strong,b,i,h1,h2,h3,h4,h5,h6 { color: var(--rfg); }
|
||||
|
||||
/* ---- */
|
||||
::selection {
|
||||
background: var(--m);
|
||||
|
|
|
@ -14,6 +14,7 @@
|
|||
<body>
|
||||
<input name="t" type="radio" id="l">
|
||||
<input name="t" type="radio" id="d">
|
||||
<input name="t" type="radio" id="g">
|
||||
<div id="labels">
|
||||
<div class="content">
|
||||
<label for="l">light</label>
|
||||
|
@ -28,6 +29,7 @@
|
|||
</a>
|
||||
</span>
|
||||
<label for="d">dark</label>
|
||||
/ <label for="g">geek</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
|
|
|
@ -9,8 +9,10 @@
|
|||
<meta name="keywords" content="{{#tags}}{{.}}{{^last}} {{/last}}{{/tags}}">
|
||||
<link rel="stylesheet" href="/css/y.css"/><link rel="alternate" type="application/rss+xml" href="/rss.xml" /><link rel="icon" href="/favicon.ico">
|
||||
</head>
|
||||
<body><input name="t" type="radio" id="l">
|
||||
<body>
|
||||
<input name="t" type="radio" id="l">
|
||||
<input name="t" type="radio" id="d">
|
||||
<input name="t" type="radio" id="g">
|
||||
<div id="labels">
|
||||
<div class="content">
|
||||
<label for="l">light</label>
|
||||
|
@ -25,6 +27,7 @@
|
|||
</a>
|
||||
</span>
|
||||
<label for="d">dark</label>
|
||||
/ <label for="g">geek</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
|
|
Loading…
Reference in a new issue