Cloned2Preserve
/
bookmarks-separator
mirror of https://github.com/AAAC290992/bookmarks-separator.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added Dual Line mode to better support Dark mode 

Inspired by https://github.com/LukaHarambasic/bookmark-divider
This commit is contained in:
Lockszmith 2023-11-10 22:39:07 -05:00
parent c872d67aed
commit 9954c1172f
1 changed files with 99 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@ -60,7 +60,9 @@
<label for="style" class="block text-sm font-medium text-gray-700">Style</label> <label for="style" class="block text-sm font-medium text-gray-700">Style</label>
<select name="style" class="mt-1 block w-full rounded-md border border-gray-300 bg-white py-2 px-3 shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required> <select name="style" class="mt-1 block w-full rounded-md border border-gray-300 bg-white py-2 px-3 shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
<option value="vertical">Vertical Bar</option> <option value="vertical">Vertical Bar</option>
<option value="v2">Vertical Dual Bar</option>
<option value="horizontal">Horizontal Bar</option> <option value="horizontal">Horizontal Bar</option>
<option value="h2">Horizontal Dual Bar</option>
<option value="circle">Circle</option> <option value="circle">Circle</option>
</select> </select>
</div> </div>
@ -71,6 +73,7 @@
<div class="col-span-6"> <div class="col-span-6">
<label for="color" class="block text-sm font-medium text-gray-700">Color</label> <label for="color" class="block text-sm font-medium text-gray-700">Color</label>
<input type="text" name="color" placeholder="HEX, RGB(A), CSS Color Names" class="mt-1 block w-full rounded-md border border-gray-300 bg-white py-2 px-3 shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required> <input type="text" name="color" placeholder="HEX, RGB(A), CSS Color Names" class="mt-1 block w-full rounded-md border border-gray-300 bg-white py-2 px-3 shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
<input type="text" name="color2" placeholder="HEX, RGB(A), CSS Color Names" class="mt-1 block w-full rounded-md border border-gray-300 bg-white py-2 px-3 shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
</div> </div>
</div> </div>
</div> </div>
@ -96,15 +99,20 @@
p = new URLSearchParams(window.location.search), p = new URLSearchParams(window.location.search),
o = p.get('style'), o = p.get('style'),
c = p.get('color'), c = p.get('color'),
w = p.get('width'), c2 = p.get('color2'),
l = `<line ${ o === 'vertical' ? 'x1="8" x2="8" y1="0" y2="16"' : 'x1="0" x2="16" y1="8" y2="8"' } stroke="${c}" stroke-width="${w}"/>`, w = 1 * p.get('width'),
v = `<circle cx="8" cy="8" r="${w/2}" fill="${c}"/>`, l = `<line ${ o.slice(0, -1) === 'vertical' ? 'x1="8" x2="8" y1="0" y2="16"' : 'x1="0" x2="16" y1="8" y2="8"' } stroke="${c}" stroke-width="${w}"/>`,
s = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">${ o === 'circle' ? v : l }</svg>`; l2 = `<line ${ o.slice(0, -1) === 'vertical' ? `x1="${ w+9 }" x2="${w+9}" y1="0" y2="16"` : `x1="0" x2="16" y1="${ w+9 }" y2="${w+9}"` } stroke="${c2}" stroke-width="${w}"/>`
console.log(`${l2}`)
circle = `<circle cx="8" cy="8" r="${w/2}" fill="${c}"/>`,
circle2 = `<circle cx="8" cy="8" r="${w/2}" fill="${c2}"/>`,
s = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">${ o === 'circle' ? circle : l + (o.slice(-1) === '2' ? l2 : '') }</svg>`;
a.innerHTML = s; a.innerHTML = s;
f.href = `data:image/svg+xml,${encodeURIComponent(s)}`; f.href = `data:image/svg+xml,${encodeURIComponent(s)}`;
r.style.value = o || 'vertical'; r.style.value = o || 'vertical';
r.width.value = w; r.width.value = w;
r.color.value = c; r.color.value = c;
r.color2.value = c2;
})(); })();
</script> </script>
</body> </body>