kouhais-mirrors
/
safer-indie-wiki-buddy
mirror of https://github.com/KevinPayravi/indie-wiki-buddy.git
1
0
Fork 0
Code

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
settings.html
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,48 +558,51 @@
<option value="TOK">Toki Pona (TOK)</option> <option value="TOK">Toki Pona (TOK)</option>
</select> </select>
</div> </div>
<div id="togglesColumnLabels" class="toggles"> <div class="sticky">
<div> <div id="togglesColumnLabels" class="toggles">
<span></span>
<div> <div>
<div>Wiki experience</div> <span></span>
<div>Search experience</div> <div>
<div>Wiki experience</div>
<div>Search experience</div>
</div>
</div> </div>
</div> </div>
</div> <div id="togglesKeys" class="toggles togglesHeader">
<div id="togglesKeys" class="toggles togglesHeader"> <div>
<div> <span>Click icon to set all wikis in column:</span>
<span>Click icon to set all wikis in column:</span> <div class="inputsContainer">
<div class="inputsContainer"> <div>
<div> <button id="setAllDisabled" type="button" data-title="Do nothing when visiting non-indie wiki">
<button id="setAllDisabled" type="button" data-title="Do nothing when visiting non-indie wiki"> <img src="images/toggle-disabled.png" width="18" alt="" />
<img src="images/toggle-disabled.png" width="18" alt="" /> </button>
</button> </div>
</div> <div>
<div> <button id="setAllAlert" type="button" data-title="Show banner when indie wiki is available">
<button id="setAllAlert" type="button" data-title="Show banner when indie wiki is available"> <img src="images/toggle-alert.png" width="18" alt="" />
<img src="images/toggle-alert.png" width="18" alt="" /> </button>
</button> </div>
</div> <div>
<div> <button id="setAllRedirect" type="button" data-title="Automatically redirect to indie wiki">
<button id="setAllRedirect" type="button" data-title="Automatically redirect to indie wiki"> <img src="images/toggle-redirect.png" width="18" alt="Automatically redirect to indie wiki" />
<img src="images/toggle-redirect.png" width="18" alt="Automatically redirect to indie wiki" /> </button>
</button> </div>
</div> <div>
<div> <button id="setAllSearchEngineDisabled" type="button" data-title="Do nothing on search engines">
<button id="setAllSearchEngineDisabled" type="button" data-title="Do nothing on search engines"> <img src="images/toggle-disabled.png" width="18" alt="" />
<img src="images/toggle-disabled.png" width="18" alt="" /> </button>
</button> </div>
</div> <div>
<div> <button id="setAllSearchEngineReplace" type="button" data-title="Replace non-indie search results">
<button id="setAllSearchEngineReplace" type="button" data-title="Replace non-indie search results"> <img src="images/toggle-replace.png" width="18" alt="" />
<img src="images/toggle-replace.png" width="18" alt="" /> </button>
</button> </div>
</div> <div>
<div> <button id="setAllSearchEngineHide" type="button"
<button id="setAllSearchEngineHide" type="button" data-title="Hide non-indie wiki from search results"> 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>