Settings styling improvements

pull/311/head
Kevin Payravi 2023-11-04 02:53:57 -05:00
parent 1ee491c1e9
commit 888ac97cb4
1 changed files with 59 additions and 48 deletions

View File

@ -200,7 +200,8 @@
cursor: default; cursor: default;
} }
#legend div, #legend span { #legend div,
#legend span {
padding-left: 8px; padding-left: 8px;
} }
@ -293,12 +294,6 @@
background-color: #e8f0fe; background-color: #e8f0fe;
} }
#togglesKeys {
position: sticky;
top: 0;
z-index: 999;
}
#togglesKeys button { #togglesKeys button {
all: unset; all: unset;
display: inline-flex; display: inline-flex;
@ -351,6 +346,11 @@
top: 30px; top: 30px;
} }
#togglesColumnLabels {
background-color: white;
padding-top: 5px;
}
#togglesColumnLabels>div>div { #togglesColumnLabels>div>div {
display: flex; display: flex;
width: 150px; width: 150px;
@ -393,6 +393,12 @@
.text-sm { .text-sm {
font-size: .85em; font-size: .85em;
} }
.sticky {
position: sticky;
top: 0;
z-index: 999;
}
</style> </style>
</head> </head>
@ -512,7 +518,8 @@
<legend> <legend>
<span aria-hidden="true"></span> Icon legend <span aria-hidden="true"></span> Icon legend
</legend> </legend>
<span class="text-sm">When visiting a Fandom or Fextralife wiki that has an independent alternative, IWB can:</span> <span class="text-sm">When visiting a Fandom or Fextralife wiki that has an independent alternative, IWB
can:</span>
<div> <div>
<img src="images/toggle-disabled.png" width="18" height="18" alt="" /> Do nothing <img src="images/toggle-disabled.png" width="18" height="18" alt="" /> Do nothing
</div> </div>
@ -525,7 +532,8 @@
indie wiki indie wiki
</div> </div>
<br /> <br />
<span class="text-sm">When search engine results include a Fandom or Fextralife wiki that has an independent alternative, IWB can:</span> <span class="text-sm">When search engine results include a Fandom or Fextralife wiki that has an independent
alternative, IWB can:</span>
<div> <div>
<img src="images/toggle-disabled.png" width="18" height="18" alt="" /> Do nothing <img src="images/toggle-disabled.png" width="18" height="18" alt="" /> Do nothing
</div> </div>
@ -550,6 +558,7 @@
<option value="TOK">Toki Pona (TOK)</option> <option value="TOK">Toki Pona (TOK)</option>
</select> </select>
</div> </div>
<div class="sticky">
<div id="togglesColumnLabels" class="toggles"> <div id="togglesColumnLabels" class="toggles">
<div> <div>
<span></span> <span></span>
@ -589,13 +598,15 @@
</button> </button>
</div> </div>
<div> <div>
<button id="setAllSearchEngineHide" type="button" data-title="Hide non-indie wiki from search results"> <button id="setAllSearchEngineHide" type="button"
data-title="Hide non-indie wiki from search results">
<img src="images/toggle-hide.png" width="18" alt="" /> <img src="images/toggle-hide.png" width="18" alt="" />
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div id="togglesDefaults" class="toggles togglesHeader"> <div id="togglesDefaults" class="toggles togglesHeader">
<div> <div>
<span>Default for new wikis in future updates:</span> <span>Default for new wikis in future updates:</span>