extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-03-17 16:18:13 +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"] {
border: 0;
height: 2.5em;
min-width: 2.5em;
display: block;
cursor: pointer;
-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);
}
.theme-input {
.theme-input[type="color"] {
opacity: 0;
width: 2px;
min-width: 2px;
height: 2px;
position: absolute;
top: 0;
left: 0;
}
.theme-input:focus+.theme-label {
.theme-input[type="color"]:focus+.theme-label {
background-color: var(--gray-03);
border-bottom-color: rgb(var(--accent));
color: var(--white);

4
index.html
View File

@ -54,13 +54,13 @@
<button class="button mb-0 control-link-list" tabindex="1">
<span class="button-text">List</span>
</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>
</button>
</div>
<div class="head-item mb-3 mb-xl-0">
<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">
<span class="button-text">Accent</span>
</label>