settings menu styled

This commit is contained in:
QuiteAFancyEmerald 2024-07-16 18:03:09 -07:00
parent ed98a01d51
commit 7307bbbd84
3 changed files with 73 additions and 21 deletions

View file

@ -408,6 +408,30 @@ details[open] summary {
font-family: "Titillium Web", sans-serif; font-family: "Titillium Web", sans-serif;
} }
.navbar .dropdown-settings {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
backdrop-filter: blur(10px); /* Blurs the background */
z-index: 5; /* Ensures it appears above other content */
align-items: center;
justify-content: center;
display: flex; /* Flexbox to center content */
}
.settings-content {
background-color: var(--nord0);
border: 1px solid var(--nord3);
border-radius: 10px;
padding: 25px;
z-index: 6; /* Ensures it appears above the background blur */
width: 450px; /* Adjust the size as needed */
text-align: center;
}
.dropdown-parent:focus-within .dropdown-child { .dropdown-parent:focus-within .dropdown-child {
display: block; display: block;
} }
@ -787,15 +811,22 @@ details[open] summary {
margin-top: 10px; margin-top: 10px;
} }
#csel input:not([type="checkbox"]) { #csel input:not([type="checkbox"]),
#csel select {
outline: none; outline: none;
display: block; display: block;
vertical-align: baseline;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: calc(100% - 200px);
padding: 5px; padding: 10px 12px;
margin: 2px 0px; color: white;
border-radius: 5px;
margin: 5px 0px;
border-radius: 2px; border-radius: 2px;
font-family: "NeueMontrealMedium", sans-serif;
background-color: var(--nord1);
border: 1px solid var(--nord9); border: 1px solid var(--nord9);
display: inline;
} }
#csel input[type="text"]:focus { #csel input[type="text"]:focus {

View file

@ -36,7 +36,7 @@
<div class="pulse white-text"> <div class="pulse white-text">
<a href="#">Settings <i class="fas fa-cog pulse"></i></a> <a href="#">Settings <i class="fas fa-cog pulse"></i></a>
</div> </div>
<div class="dropdown-child" tabindex="0"> <div class="dropdown-settings" tabindex="0">
<div id="csel"><!--SETTINGS--></div> <div id="csel"><!--SETTINGS--></div>
</div> </div>
</li> </li>

View file

@ -1,16 +1,37 @@
<p class=cseltitle>Tab Cloak</p> <div class="settings-content">
<p class=csellabel>Change the title:</p> <p class=cseltitle>Settings Menu</p>
<form class=cselform id=titleform> <p class=csellabel>Change the universal tab title:</p>
<input type=text placeholder=Tab Title spellcheck=false><input class=cselbutton type=submit value=Apply> <form class=cselform id=titleform>
</form> <input type=text placeholder=Tab Title spellcheck=false><input class="cselbutton cselmargin" type=submit value=Apply>
<p class=csellabel>Change the <a href=/?i>icon</a>:</p> </form>
<form class=cselform id=iconform> <p class=csellabel>Change the universal tab <a href=/?i>icon</a>:</p>
<input type=text placeholder=Icon URL spellcheck=false><input class=cselbutton type=submit value=Apply> <form class=cselform id=iconform>
</form> <input type=text placeholder=Icon URL spellcheck=false><input class="cselbutton cselmargin" type=submit value=Apply>
<input id=cselreset class=cselbutton type=button value=Reset> </form>
<input id=cselab class=cselbutton type=button value=Stealth> <input id=cselreset class=cselbutton type=button value=Reset>
<p class=csellabel> <input id=cselab class=cselbutton type=button value="Open Stealth Frame">
<input id=hideads type=checkbox checked> <p class=csellabel>Icon Presets:</p>
<span>Hide Ads</span> <select>
</p> <option>Google</option>
<p>Ads are disabled forever.</p> <option>Bing</option>
<option>Google Drive</option>
<option>Gmail</option>
</select>
<p class=csellabel>Default Ultraviolet Transport:</p>
<select>
<option>epoxy</option>
<option>libcurl</option>
<option>bare</option>
<option>other</option>
</select>
<p class=csellabel>Network Options:</p>
<p class=csellabel>
<input id=hideads type=checkbox checked>
<span>Hide Ads</span>
</p>
<p class=csellabel>
<input id=hideads type=checkbox checked>
<span>Enable Tor</span>
</p>
<p><br>Holy Unblocker LTS v6.3.x</p>
</div>