Restyle tabs, add tab for own proxies

This commit is contained in:
Ilya Ig. Petrov 2017-04-21 16:04:11 +05:00
parent 0e72fe9833
commit bc78bc7c5a

View File

@ -82,6 +82,10 @@
padding-left: 1.4em; padding-left: 1.4em;
padding-right: 1.4em; padding-right: 1.4em;
} }
.horizontal-list,
.horizontal-list li {
line-height: 100%;
}
.horizontal-list li { .horizontal-list li {
display: inline-block; display: inline-block;
} }
@ -147,6 +151,7 @@
:root:not(.if-options-page) #acc-pac:not(:checked) ~ .main-nav section[data-for="acc-pac"], :root:not(.if-options-page) #acc-pac:not(:checked) ~ .main-nav section[data-for="acc-pac"],
:root:not(.if-options-page) #acc-exc:not(:checked) ~ .main-nav section[data-for="acc-exc"], :root:not(.if-options-page) #acc-exc:not(:checked) ~ .main-nav section[data-for="acc-exc"],
:root:not(.if-options-page) #acc-own:not(:checked) ~ .main-nav section[data-for="acc-own"],
:root:not(.if-options-page) #acc-mods:not(:checked) ~ .main-nav section[data-for="acc-mods"], :root:not(.if-options-page) #acc-mods:not(:checked) ~ .main-nav section[data-for="acc-mods"],
:root:not(.if-options-page) #acc-ntf:not(:checked) ~ .main-nav section[data-for="acc-ntf"] :root:not(.if-options-page) #acc-ntf:not(:checked) ~ .main-nav section[data-for="acc-ntf"]
{ {
@ -164,6 +169,7 @@
} }
:root:not(.if-options-page) #acc-pac:not(:checked) ~ .main-nav section[data-for="acc-pac"] *, :root:not(.if-options-page) #acc-pac:not(:checked) ~ .main-nav section[data-for="acc-pac"] *,
:root:not(.if-options-page) #acc-exc:not(:checked) ~ .main-nav section[data-for="acc-exc"] *, :root:not(.if-options-page) #acc-exc:not(:checked) ~ .main-nav section[data-for="acc-exc"] *,
:root:not(.if-options-page) #acc-own:not(:checked) ~ .main-nav section[data-for="acc-own"] *,
:root:not(.if-options-page) #acc-mods:not(:checked) ~ .main-nav section[data-for="acc-mods"] *, :root:not(.if-options-page) #acc-mods:not(:checked) ~ .main-nav section[data-for="acc-mods"] *,
:root:not(.if-options-page) #acc-ntf:not(:checked) ~ .main-nav section[data-for="acc-ntf"] * :root:not(.if-options-page) #acc-ntf:not(:checked) ~ .main-nav section[data-for="acc-ntf"] *
{ {
@ -176,42 +182,44 @@
.nav-labels li label { .nav-labels li label {
display: inline-block; display: inline-block;
border: 2px solid var(--blue-bg); border: 1px solid var(--blue-bg);
border-radius: 0.7em; border-radius: 0.2em;
background-color: white; background-color: white;
color: var(--ribbon-color); color: var(--ribbon-color);
padding: 0.2em 0.65em 0.3em 0.4em; padding: 0.2em 0.3em 0.3em 0.2em;
line-height: 0.9em; line-height: 0.8em;
margin: 0.1em 0; margin: 0.1em 0;
} }
.nav-labels li label:hover { .nav-labels li label:hover {
background-color: var(--blue-bg); background-color: var(--blue-bg);
color: white; color: white;
/*
border-color: white; border-color: white;
border-style: dotted; border-style: dotted;*/
} }
/* CHECKED LABELS */ /* CHECKED LABELS */
#acc-pac:checked ~ .nav-labels label[for="acc-pac"]:not(:hover), #acc-pac:checked ~ .nav-labels label[for="acc-pac"]:not(:hover),
#acc-exc:checked ~ .nav-labels label[for="acc-exc"]:not(:hover), #acc-exc:checked ~ .nav-labels label[for="acc-exc"]:not(:hover),
#acc-own:checked ~ .nav-labels label[for="acc-own"]:not(:hover),
#acc-mods:checked ~ .nav-labels label[for="acc-mods"]:not(:hover), #acc-mods:checked ~ .nav-labels label[for="acc-mods"]:not(:hover),
#acc-ntf:checked ~ .nav-labels label[for="acc-ntf"]:not(:hover) #acc-ntf:checked ~ .nav-labels label[for="acc-ntf"]:not(:hover)
{ {
background-color: var(--blue-bg); background-color: var(--blue-bg);
color: white; color: white;
line-height: 0.8em;
} }
/* ★★★★★ */ /* ★★★★★ */
.nav-labels label:before { .nav-labels label:before {
content: '★ '; content: '★';
padding-right: 0.1em;
visibility: hidden; visibility: hidden;
} }
.nav-labels li label:hover:before, .nav-labels li label:hover:before,
#acc-pac:checked ~ .nav-labels label[for="acc-pac"]:before, #acc-pac:checked ~ .nav-labels label[for="acc-pac"]:before,
#acc-exc:checked ~ .nav-labels label[for="acc-exc"]:before, #acc-exc:checked ~ .nav-labels label[for="acc-exc"]:before,
#acc-own:checked ~ .nav-labels label[for="acc-own"]:before,
#acc-mods:checked ~ .nav-labels label[for="acc-mods"]:before, #acc-mods:checked ~ .nav-labels label[for="acc-mods"]:before,
#acc-ntf:checked ~ .nav-labels label[for="acc-ntf"]:before #acc-ntf:checked ~ .nav-labels label[for="acc-ntf"]:before
{ {
@ -435,15 +443,17 @@
<input type="radio" name="accordion" class="off" id="acc-pac" checked/> <input type="radio" name="accordion" class="off" id="acc-pac" checked/>
<input type="radio" name="accordion" class="off" id="acc-exc"/> <input type="radio" name="accordion" class="off" id="acc-exc"/>
<input type="radio" name="accordion" class="off" id="acc-own"/>
<input type="radio" name="accordion" class="off" id="acc-mods"/> <input type="radio" name="accordion" class="off" id="acc-mods"/>
<input type="radio" name="accordion" class="off" id="acc-ntf"/> <input type="radio" name="accordion" class="off" id="acc-ntf"/>
<nav class="nav-labels horizontal-list hidden-for-options-page"> <nav class="nav-labels hidden-for-options-page">
<ul> <ul class='horizontal-list'>
<li><label for="acc-pac" class="nav-label">PAC-скрипт</label></li> <li><label for="acc-pac" class="nav-label">PAC-скрипт</label></li>
<li><label for="acc-exc" class="nav-label">Исключения</label></li>
<li><label for="acc-own" class="nav-label">Свои прокси</label></li>
<li><label for="acc-mods" class="nav-label">Модификаторы</label></li> <li><label for="acc-mods" class="nav-label">Модификаторы</label></li>
<li><label for="acc-exc" class="nav-label">Исключения</label></li> <li><label for="acc-ntf" class="nav-label">Уведомления</label></li>
<li><label for="acc-ntf" class="nav-label">Уведомления</label></li>
</ul> </ul>
<hr/> <hr/>
</nav> </nav>
@ -496,6 +506,62 @@
</section> </section>
<section data-for="acc-own">
<ul id="owns-foo">
<li class="info-row hor-flex">
<input type="checkbox" id="mods-if-mind-exceptions" checked="">
<div class="label-container">
<label for="mods-if-mind-exceptions"> Использовать СВОЙ локальный Tor</label>
</div><div class="desc">
<svg class="icon" style="position: relative; top: 0.08em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-info"></use></svg>
<div class="tooltip">Учитывать сайты, добавленные вручную. Только для своих прокси-серверов! Без своих прокси работать не будет.</div>
</div>
</li>
<li class="info-row hor-flex" style="flex-wrap: wrap;">
<input type="checkbox" id="mods-custom-proxy-string-raw">
<div class="label-container">
<label for="mods-custom-proxy-string-raw"> использовать СВОИ прокси</label>
</div>
<a href="https://rebrand.ly/ac-own-proxy" class="right-bottom-icon info-url">
<svg class="icon" style="position: relative; top: 0.08em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-info"></use></svg>
</a>
<textarea spellcheck="false" placeholder="SOCKS5 localhost:9050; # Tor Expert
SOCKS5 localhost:9150; # Tor Browser
HTTPS 11.22.33.44:3143;
PROXY foobar.com:8080; # Not HTTP!"></textarea>
</li>
<li class="info-row hor-flex">
<input type="checkbox" id="mods-if-mind-exceptions" checked="">
<div class="label-container">
<label for="mods-if-mind-exceptions"> Проксировать .onion, .i2p, .bit и др.</label>
</div><div class="desc">
<svg class="icon" style="position: relative; top: 0.08em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-info"></use></svg>
<div class="tooltip">Учитывать сайты, добавленные вручную. Только для своих прокси-серверов! Без своих прокси работать не будет.</div>
</div>
</li>
<li class="info-row hor-flex">
<input type="checkbox" id="mods-if-mind-exceptions" checked="">
<div class="label-container">
<label for="mods-if-mind-exceptions"> Проксировать <a href>некоторые</a> ошибки</label>
</div><div class="desc">
<svg class="icon" style="position: relative; top: 0.08em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-info"></use></svg>
<div class="tooltip">Учитывать сайты, добавленные вручную. Только для своих прокси-серверов! Без своих прокси работать не будет.</div>
</div>
</li>
<li class="control-row hor-flex">
<input type="button" value="Применить" id="apply-mods" disabled/>
<a href id="bar-reset-mods">К изначальным!</a>
</li>
</ul>
</section>
<section data-for="acc-mods"> <section data-for="acc-mods">
<ul id="pac-mods"> <ul id="pac-mods">