back to css playground
This commit is contained in:
parent
480b87009c
commit
56a9afd6f7
|
@ -158,6 +158,8 @@ input#d:checked ~ div {
|
||||||
--fg0: var(--b00);
|
--fg0: var(--b00);
|
||||||
--rfg: var(--b1);
|
--rfg: var(--b1);
|
||||||
--hl: var(--g);
|
--hl: var(--g);
|
||||||
|
--b03: var(--bg);
|
||||||
|
--b2: hsl(218,15%,23%);
|
||||||
}
|
}
|
||||||
input#d:checked ~ div img {
|
input#d:checked ~ div img {
|
||||||
filter: brightness(0.7) saturate(0.5);
|
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); }
|
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 {
|
::selection {
|
||||||
background: var(--m);
|
background: var(--m);
|
||||||
|
|
|
@ -14,6 +14,7 @@
|
||||||
<body>
|
<body>
|
||||||
<input name="t" type="radio" id="l">
|
<input name="t" type="radio" id="l">
|
||||||
<input name="t" type="radio" id="d">
|
<input name="t" type="radio" id="d">
|
||||||
|
<input name="t" type="radio" id="g">
|
||||||
<div id="labels">
|
<div id="labels">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<label for="l">light</label>
|
<label for="l">light</label>
|
||||||
|
@ -28,6 +29,7 @@
|
||||||
</a>
|
</a>
|
||||||
</span>
|
</span>
|
||||||
<label for="d">dark</label>
|
<label for="d">dark</label>
|
||||||
|
/ <label for="g">geek</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
|
|
|
@ -9,8 +9,10 @@
|
||||||
<meta name="keywords" content="{{#tags}}{{.}}{{^last}} {{/last}}{{/tags}}">
|
<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">
|
<link rel="stylesheet" href="/css/y.css"/><link rel="alternate" type="application/rss+xml" href="/rss.xml" /><link rel="icon" href="/favicon.ico">
|
||||||
</head>
|
</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="d">
|
||||||
|
<input name="t" type="radio" id="g">
|
||||||
<div id="labels">
|
<div id="labels">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<label for="l">light</label>
|
<label for="l">light</label>
|
||||||
|
@ -25,6 +27,7 @@
|
||||||
</a>
|
</a>
|
||||||
</span>
|
</span>
|
||||||
<label for="d">dark</label>
|
<label for="d">dark</label>
|
||||||
|
/ <label for="g">geek</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
|
|
Loading…
Reference in a new issue