extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-03-16 23:58:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

[refactor] improve initial theme state

Browse Source
This commit is contained in:
zombieFox 2018-12-27 12:31:45 -07:00
parent 9ea98971e5
commit 71479ef504
3 changed files with 4 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/form.css
View File

@ -76,7 +76,6 @@ label {
input[type="color"] { input[type="color"] {
border: 0; border: 0;
height: 2.5em; height: 2.5em;
min-width: 2.5em;
display: block; display: block;
cursor: pointer; cursor: pointer;
-webkit-appearance: none; -webkit-appearance: none;

5
css/theme.css
View File

@ -19,17 +19,16 @@
box-shadow: 0 0 0.25em 0 rgba(var(--accent), 0.6), 0 0 0.5em 0 rgba(var(--accent), 0.4); box-shadow: 0 0 0.25em 0 rgba(var(--accent), 0.6), 0 0 0.5em 0 rgba(var(--accent), 0.4);
} }
.theme-input { .theme-input[type="color"] {
opacity: 0; opacity: 0;
width: 2px; width: 2px;
min-width: 2px;
height: 2px; height: 2px;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
} }
.theme-input:focus+.theme-label { .theme-input[type="color"]:focus+.theme-label {
background-color: var(--gray-03); background-color: var(--gray-03);
border-bottom-color: rgb(var(--accent)); border-bottom-color: rgb(var(--accent));
color: var(--white); color: var(--white);

4
index.html
View File

@ -54,13 +54,13 @@
<button class="button mb-0 control-link-list" tabindex="1"> <button class="button mb-0 control-link-list" tabindex="1">
<span class="button-text">List</span> <span class="button-text">List</span>
</button> </button>
<button class="button mb-0 control-link-blocks active" tabindex="1"> <button class="button mb-0 control-link-blocks" tabindex="1">
<span class="button-text">Block</span> <span class="button-text">Block</span>
</button> </button>
</div> </div>
<div class="head-item mb-3 mb-xl-0"> <div class="head-item mb-3 mb-xl-0">
<form class="theme"> <form class="theme">
<input id="accent-picker" type="color" class="theme-input" value="#ffaa33" tabindex="1"> <input id="accent-picker" type="color" class="theme-input" value="#000000" tabindex="1">
<label class="button mb-0 theme-label" for="accent-picker"> <label class="button mb-0 theme-label" for="accent-picker">
<span class="button-text">Accent</span> <span class="button-text">Accent</span>
</label> </label>