Тёмная сторона vott.ru

В общем утомила меня стандартная белая тема нашего любимого vott.ru, и я решил заменить некоторые файлы сайта. Понятное дело не на самом сервере, а локально, для самого себя. Поскольку я хожу на ресурс через связку tor + privoxy, то первой идеей было отредактировать фильтр /etc/privoxy/user.filter, залить измененный .css на локальный сервер и подменять его при каждой загрузке. Но моих мозгов не хватило, чтобы осилить логику работы фильтра, поэтому пришлось пойти иным путем, а именно установкой плагина[censored] и добавлением измененного .css уже через него. Однако я нихера не шарю в дизайне вообще и в веб дизайне в частности, уверен моя работа рассмешит любого профессионала. Но и пусть, я это делал не для конкурса лучший рукожоп месяца, а для себя любимого. Тем не менее почему бы и не поделиться с контингентом, порою весьма щедрым на минусы, особенно в темах касающихся IT (поэтому я стараюсь такие темы не публиковать здесь вовсе).

В общем хватит словоблудия, прилагаю скриншоты перекрашенного vott.ru, а так же .css для самостоятельного применения цветовой схемы через плагин Stylus. Если у кого возникнет такое желание, само собой. Я не настаиваю :)

[censored]
[censored]
[censored]


CSS:

div.header {
    background: #1a1a1b;
}
body {
    background-color:#1a1a1b;
    color:#000;
    margin-top:0;
    margin-left:8px;
    margin-right:8px;
    line-height:13pt
}
div.navigation {
    background-color: #333;
    border-bottom: 1px solid #5b6455;
}
a {
 color:#d7d9af;
}
a:visited {
 color:#a2a483
}
a:hover {
 color:#d7d9af;
}
a.remote.vpenu {
    color:#f00;
}
a.user_m {
    color: #fF0;
}
div.vote {
    color: #000;
    border: 0 solid #c3d6b3;
    background-color: #d7d9af;
}
body {
    color: #a4a4a4;
}
div.form_wrapper {
    border: 1px solid #000;
    background-color: #333;
    padding: 15px;
}
_entries_per_page {
    color: #f00;
}
div.vote_wrapper span.vote {
    color: #aaa;
}
div.drop_menu {
    border: 1px solid #333;
    background-color: #333;
    box-shadow: 1px 1px 3px #000;
}
div.drop_menu:hover{
    border: 1px solid #333;
    background-color: #333;
    box-shadow: 1px 1px 3px #000;
}
div.drop_menu a {
    color: #d7d9af;
    box-shadow: 1px 1px 3px #000;
}
div.drop_menu a:hover {
    background: #333;
    color: #fff;
}
div.drop_menu_container a.drop {
    border: 1px solid #333;
    background-color: #333;
    box-shadow: 1px 1px 3px #000;
}
div.drop_menu_container a.drop:hover {
    background-color: #333;
    color:#fff
}
div.popup_menu_container div.popup_menu {
    background: #333 none repeat scroll 0 0;
    border: 1px solid #000;
    box-shadow: 1px 1px 3px #000;
}
div.popup_menu_container div.user_popup_menu a {
    background-color: #333;
    color: #d7d9af;
}
div.popup_menu_container div.user_popup_menu a:hover {
    background-color: #333;
    color: #fff;
}
div.paginator {
 color:#d7d9af;
}
div.paginator a {
 color:#d7d9af;
 border:1px solid #d7d9af;
 background-color:#333
}
div.paginator a:hover {
    color:#fff;
    background-color:#333
}
div.query {
    background-color: #333;
}
span.quote {
    color: #a2a2a2;
}
div.comment_body {
    color: #cecece;
}
div.comment_info_wrapper {
    color: #cecece;
}
div.comment_form {
    border: 1px solid #c3d6b3;
    background-color: #333;
    display: block;
}
textarea.input2 {
    color:#ddd;
    background-color: #111;
}
div.comment_wrapper {
    color: #a4a4a4;
    border-top: 1px solid #c3d6b3;
    background: #333;
}
div.comment_wrapper2 {
    border-top: 1px solid #c3d6b3;
    background: #222;
}
div.blog_header {
    background-color: #333;
    margin: 10px 0 0;
    padding: 5px 15px 10px 22px;
    border-bottom: 1px solid #96b67f;
}
div.blog_content_wrapper {
    background-color: #333;
    margin: 10px 0 0;
    padding: 5px;
}
div.blog_entry {
    background-color: #333;
    border: 1px solid #dae7cf;
}
div.paginator {
    color: #333;
}
div.blog_list_wrapper {
    background-color: #333;
    border: 1px solid #dae7cf;
}
select {
    color:#d7d9af;
    background-color: #111;
}
select.input2 {
    background-color: #111;
}
input.input2 {
    color:#fff;
    background-color: #111;
}
td {
    background-color: #222;
}
#errorExplanation {
    background-color: #222;
}
#errorExplanation ul li {
    color:#ff0;
}
pre {
    background-color: #444;
    border: solid 1px #000;
    color: #fff;
}

ЗЫ: Поле поиска перекрасить не смог :'(

[censored]

> Да прибудет с вами Сила!
На поезде или пешком?

С конём.

poruchik БТП

> Ради интереса в мобильном хроме включил темную тему - она затемнила стартовую страницу и панели. Внешний вид сайтов не изменился.

Я для мобильной версии не делал, даже не вспомнил про такое. Поправлю

> ЗЫ: Поле поиска перекрасить не смог :'(

Попробуй так:

#quickSearch input#query {
    background-color: #333;
}

> А можно скормить данному плагину уже сконфигурированный в стиле Тупичка файлик, чтобы не настраивать вручную?

Если вопрос мне, то не знаю. Сам не шарю, как и многие)

Оооо! Моё почтение! Так гораздо лучше.

> надо пошаговую инструкцию

Я просто установил Dark Night Mode.
Результат тот же + его можно регулировать кнопками и ползунками до комфортного именно тебе состояния. Без овладения погромистским мастерством.

Для Tor это Ctrl+Shift+A
В темах установлена тёмная тема и в расширениях - Dark Night Mode

Текущая раскраска полной версии сайта. Перекрасить панельки на мобильной версии не смог :(

div.header {
    background: #1a1a1b;
}
body {
    background-color:#1a1a1b;
    color:#000;
}
div.navigation {
    background-color: #333;
    border-bottom: 1px solid #5b6455;
}
a {
    text-decoration: none;
    color:#d7d9af;
}
a:visited {
    text-decoration: none;
    color:#a2a483
}
a:hover {
    text-decoration: none;
    color:#d7d9af;
}
a.remote.vpenu {
    color:#f00;
}
a.user_m {
    text-decoration: none;
    color: #fF0;
}
div.vote {
    color: #000;
    border: 0 solid #c3d6b3;
    background-color: #d7d9af;
}
body {
    color: #a4a4a4;
}
div.form_wrapper {
    border: 1px solid #000;
    background-color: #333;
    padding: 15px;
}
_entries_per_page {
    color: #f00;
}
div.vote_wrapper span.vote {
    color: #aaa;
}
div.drop_menu {
    border: 1px solid #333;
    background-color: #333;
    box-shadow: 1px 1px 3px #000;
}
div.drop_menu:hover{
    border: 1px solid #333;
    background-color: #333;
    box-shadow: 1px 1px 3px #000;
}
div.drop_menu a {
    color: #d7d9af;
    box-shadow: 1px 1px 3px #000;
}
div.drop_menu a:hover {
    background: #333;
    color: #fff;
}
div.drop_menu_container a.drop {
    border: 1px solid #333;
    background-color: #333;
    box-shadow: 1px 1px 3px #000;
}
div.drop_menu_container a.drop:hover {
    background-color: #333;
    color:#fff
}
div.popup_menu_container div.popup_menu {
    background: #333 none repeat scroll 0 0;
    border: 1px solid #000;
    box-shadow: 1px 1px 3px #000;
}
div.popup_menu_container div.user_popup_menu a {
    background-color: #333;
    color: #d7d9af;
}
div.popup_menu_container div.user_popup_menu a:hover {
    background-color: #333;
    color: #fff;
}
div.paginator {
    color:#d7d9af; 
}
div.paginator a {
    color:#d7d9af;
    border:1px solid #d7d9af;
    background-color:#333
}
div.paginator a:hover {
    color:#fff;
    background-color:#333
}
div.query {
    background-color: #333;
}
span.quote {
    color: #a2a2a2;
}
div.comment_body {
    color: #cecece;
}
div.comment_info_wrapper {
    color: #cecece;
}
div.comment_form {
    border: 1px solid #000;
    background-color: #333;
    display: block;
}
textarea.input2 {
    color:#ddd;
    background-color: #111;
}
div.comment_wrapper {
    border-top: 1px solid #000;
    background: #333;
}
div.comment_wrapper2 {
    border-top: 1px solid #000;
    background: #222;
}
div.comment_hightlight {
    border: 1px solid #333;
    border-top-color: #000;
    border-top-style: solid;
    border-top-width: 1px;
    background-color: #162b07;
}
div.blog_header {
    background-color: #333;
    margin: 10px 0 0;
    padding: 5px 15px 10px 22px;
    border-bottom: 1px solid #96b67f;
}
div.blog_content_wrapper {
    background-color: #333;
    margin: 10px 0 0;
    padding: 5px;
}
div.blog_entry {
    background-color: #333;
    border: 1px solid #dae7cf;
}
div.paginator {
    color: #333;
}
div.blog_list_wrapper {
    background-color: #333;
    border: 1px solid #dae7cf;
}
select {
    color:#d7d9af;
    background-color: #111;
}
select.input2 {
    background-color: #111;
}
input.input2 {
    color:#fff;
    background-color: #111;
}
td {
    background-color: #222;
}
#errorExplanation {
    background-color: #222;
}
#errorExplanation ul li {
    color:#ff0;
}
pre {
    background-color: #444;
    border: solid 1px #000;
    color: #fff;
}
.notification {
    color: #fff;
    border: 1px solid #000;
    border-bottom-color: #333;
    background-color: #333;
}
.notification_info {
    border: 1px solid #000;
    border-top-color: #000;
    background-color: #333;
}
.notification_box {
    background-color: #333;
    border: 1px solid #000;
    box-shadow: 1px 1px 3px #000;
}
div.toggle {
    background: #333 url(/assets/bigarrdown.png) no-repeat right 10px center;
}
pane
{
    background-color: #333;
}
#quickSearch input#query {
    color: #fff;
    background-color: #333;
}
div.header a {
    background: transparent url(/assets/ul.gif) repeat-x scroll 0 100%;
}
.notification_button {
    color: #000;
    background:url(/assets/balloon.png) no-repeat center -1px;
}
a.notif_close.no-und {
    color: #fff;
}
#tag_red {
    color: red;
}
.flip {
    margin: 8px 0 0;
    border: 1px solid #666;
    border-bottom-color: #222;
    border-bottom: 1px solid #666;
}
.active {
    background: #222 url(/assets/bigarrup.png) no-repeat right 10px center !important;
}

.

.