Полезная информация

В мире Mozilla происходит много интересных событий. Но вам не нужно постоянно посещать новостные сайты, чтобы быть в курсе всех изменений. Зайдите на ленту новостей Mozilla Россия.

№47627-05-2011 03:25:00

iDev.Pi
баг-репортёр
 
Группа: Extensions
Зарегистрирован: 31-01-2010
Сообщений: 2718
UA: Nightly 7.0

Re: Stylish

Raf-9600
спасибо за стиль, понравился (правда надо бы его доделать, чтобы показывал информацию о выбранном элементе, а то совсем всё резать - не правильно.

а пока - торгану тем, что у меня стоит (из чего многое писал сам):
Link style and color protection - некоторые сайты маскируют ссылки на страницах под обычный текст, т.е. иногда их не отличить от обычного текста (а в ряде случаев - это нельзя сделать, даже при наведении на них курсором). Стиль написан с использованием новейших CSS селекторов, поэтому для верной работы скрипта нужен [nightly].

Direct links indicator - его предназначение ясно из скриншота:

скрытый текст
23388_after.png

Display keyboard shortcuts - у многих сайтов есть шорткаты (т.е. сочетания клавиш), о которых пользователю никак не сообщается, что неудобно.
Different cursors for different link types - лично мне нравится, когда я могу отличить яваскриптовую кнопку/ссылку от обычной кнопки, или от кнопки которая должна открыть новую вкладку (или новую пустую вкладку). Поэтому я написал стиль, чтобы курсор менялся в зависимости от типа ссылки.

А вот мой "Chrome" стиль изменяющий морду браузера под меня - там много всего не нужного никому кроме меня, но я пытался везде в коде делать комментарии (правда они на английском) - и я подумал, что кто-то может выцепить оттуда что-нибудь полезное, вроде кода, который бы восстанавливал бы скрытые кнопки "вперёд" и "назад" у квиксёрча вызываемого при клике по "/". Или вроде хака, позволяющего копировать "умные" mailto: ссылки в которых заранее вбит не только адресат, но и тема и содержимое письма. Без этого хака по такой ссылке если кликнуть правой кнопкой мыши, то там не будет пункта меню "Копировать адрес ссылки", а без этого узнать что там заранее введено в тему и в тело сообщения - узнать можно будет только когда нажмёшь на неё, что не комильфо.

скрытый текст

Выделить код

Код:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/*----------------------------------------------------------*/

/* Show Charset menuitem in the top-level of appmenu */

#appmenu_charsetMenu[hidden="true"] {
   display: block !important; }


/* Restyle toolbars */

#TabsToolbar {
   background-image: none !important;
   margin-bottom: -1px !important; }
:root[tabsontop="true"] #PersonalToolbar {
   background: transparent !important;
   border: 0 !important;
   text-shadow: rgb(255, 255, 255) 0px 0px 6px, rgb(255, 255, 255) 0px 0px 6px, rgba(255, 255, 255, 0.4) 0px 1px 0px; }
:root[tabsontop="false"] #nav-bar {
   background-color: rgb(231, 237, 246) !important;
   border: 1px solid black !important;
   border-radius: 2px 2px 0 0 !important; }
:root[tabsontop="false"] tab[selected="true"] {
   background-image: -moz-linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0.5) 50%), -moz-linear-gradient(rgb(207, 219, 236), rgb(207, 219, 236)) !important; }

/* Double-click on tab-bar to open new tab even if tabs-on-top when not in full-screen */

#navigator-toolbox > #TabsToolbar {
   -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar") !important; }


/* Restyle the addon-bar */

#addon-bar, #browser-bottombox {
   background: transparent !important;
   text-shadow: 0 0 4px white !important;
   border: none !important; }
#FindToolbar {
   border-top: 0 !important; }
#appcontent {
   border-bottom: 1px solid black !important; }


/* Make all required text fields have a red dashed border */

*:required {
   border: 1px dashed red !important;
   background-color: lime !important; }


/* A small hack to let copy advanced mailto: links */

#context-copylink {
   visibility: visible !important;
   display: -moz-box !important; }


/* AppButton + MenuBar in the window's titlebar

#appmenu-button-container {
   height: 26px;
 }
#appmenu-button {
   margin-bottom: 5px !important;
   min-width: 1px !important;
   width: 40px; }
#appmenu-button .button-text { 
   color: transparent; 
   text-shadow: none;
   width: 0;
   margin-left: 9px !important;
   margin-right: -10px !important;
   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADK0lEQVQ4jV2TTWxUZRSGn++7d+bey3SYMgMzdNLMTCu2VcE0CjG1qYqRSEhYKElTA66MooaNLozDwh8WjAs3JsSFSxeKRg0axSj+EApFYotAS0ctWmeEOpTS6fx0fu+9n4v+pPqsTk7yvuck57wCIGXIT4BUsu6OBbr2bO+p5J71OfWHxvzxMEuMA6eBLwu/nxxlDWLZQAGcDG09Ou/xDR3IXegE2F9zEMDg/rd59eky1z467575pfLdrrmLRw7dqJxjWXwgZUh1682gShlSra2Ha0qdK9nq63xDbXniLTUx8pz68Y1+9U5XuPrhwMZBACkEjwRDGgD7hoLE457V9c4GNF5u9XK1WGfw4B4efT1B594eHnvlHrNUku99/mRks9SkuL/jTk+jkrVxF6ps7/Ovmu0bChKXUEQnH9uCMrx8MNJK4sEIoZgVKN9sJqXHENFou+ZtVl18iaXp1UKEjbuf4dPj86hTC1y+eJuJM3/hojF5rUGhYNO9K8TiXG2nrhTrfa0SXQoqJUnLwB0A6J5JAGamcuQn05RmctiuzlhaYkmHSNxkMe/06PWaa2CD2SYZ/rZE8/tRZnIKgKOPv0vz/Y8RysGSLtWaIJKo0Lp+nnylQq1o69LwiHKpoEBAMKKxye/S1iYBOPzNi3zW9wOv7chQnJ2jUczzcHsW8vOUf72J1SIqugZX/sk2+/0bNLruNvl73GZbXOfeHSY+0+ZC5hacOI3d/jwxK8vB3jT1XIPrZ/Nowh3XbUcdnxpv3BcI6VY4ZtK+LYjdcBj7aZHMHw3gKknfU/Sv+40Xdt8mpNVZmFpg8mcNb2vwlEgZssXSGNaF6N055Mc0dBxHR5oa03kvc8Ua68QisXCTRMKgik56pMyfGau4ObapWwAcMeQDluQLS4rw1j6LSFRD1ySapjCkjeMIbMAMQSarmLhUr81NOwPJujsqVr4uZcheQ+MrBdFQi6Sz20sgKNAtwCOYvd4kc0OgqnYlN+v2J+vupdUwrXDMp3W4gpdcpfY6UiQce+k6piHYEJA1p6lOlBfU4UOLzvR/0vh/jvm0DuAuILrcmgHSa4Ur/AsXclHwqDchzQAAAABJRU5ErkJggg==") no-repeat 3px !important; }
#toolbar-menubar {
   -moz-appearance: menuitem !important;
   padding-left: 2px; }
:root[tabsontop="true"][sizemode="maximized"] .titlebar-placeholder {
   display: none !important; }
:root[tabsontop="true"][sizemode="maximized"] #personal-bookmarks {
   margin-top: 26px !important; }
:root[tabsontop="true"]:not([sizemode="maximized"]) #PersonalToolbar {
   border-top: 1px solid black !important;
   border-top-left-radius: 3.5px !important;
   border-top-right-radius: 3.5px !important;
   margin-top: 6px !important; } */

/* Show bookmarm panel when Аdd-Оns Мanager is opened */

#main-window[disablechrome] #navigator-toolbox[tabsontop="true"] > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not([collapsed="true"]) {
   visibility: visible !important; }


/* Add "forward" and "back" buttons to the quicksearch */

#FindToolbar > .findbar-container > * {
   display: -moz-box !important; }


/* Set tabs' width */

.tabbrowser-tab:not([pinned])[fadein] {
   min-width: 16px !important;
   max-width: 150px !important; }


/* Sort toolbars order */

#PersonalToolbar { 
   -moz-box-ordinal-group: 8 !important; }
/* #TabsToolbar[tabsontop="true"] {
   -moz-box-ordinal-group: 1 !important; } */


/* Remove the tab-bar scrolling if there are too many tabs */

#tabbrowser-tabs > .tabbrowser-arrowscrollbox > .scrollbutton-up,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox > .scrollbutton-down {
   display: none !important; }


/* Remove dotted border for the elements of the findbar if they are clicked */

findbar > * > *:focus {
   outline: none !important; }


/* Style the "open new tab" button (removing some paddings) */

#TabsToolbar > #new-tab-button {
   margin-left: -3px !important;
   margin-right: -1px !important; }


/*-------------------- CURRENTLY UNUSED ---------------------*/

/* Light blue background for the bookmarks panel

#PersonalToolbar {
   text-shadow: white 2px -2px 4px, white -2px 2px 4px, white -2px -4px 4px, white 2px 4px 4px !important; }
:root:not([sizemode="maximized"]) #nav-bar { 
   border-left: 1px solid black !important;
   border-right: 1px solid black !important;
   border-radius: 0 !important; }
:root[tabsontop="true"]:not([sizemode="maximized"]) #TabsToolbar {
   border-left: 1px solid black !important;
   border-right: 1px solid black !important;
   padding-bottom: 1px !important; }
:root[tabsontop="false"] #nav-bar {
   background-color: rgb(207, 219, 236) !important;
   border-bottom: 1px solid grey !important; }
#navigator-toolbox[tabsontop="true"] > toolbar {
   background-color: rgb(207, 219, 236) !important; }
#nav-bar {
   border: 1px solid black !important;
   margin-top: -1px !important; }
#appcontent {
   margin-top: -1px !important; } */


/* Normalize Custom Buttons' icons

.toolbarbutton-icon {
   width: auto !important;
   height: auto !important; } */


/* Fix transparent background of some popups and menus

popup {
   background: Menu;
   -moz-appearance: menupopup;
   border: 3px solid transparent;
   -moz-border-top-colors   : ThreeDLightShadow ThreeDHighlight ThreeDFace;
   -moz-border-left-colors  : ThreeDLightShadow ThreeDHighlight ThreeDFace;
   -moz-border-right-colors : ThreeDDarkShadow  ThreeDShadow    ThreeDFace;
   -moz-border-bottom-colors: ThreeDDarkShadow  ThreeDShadow    ThreeDFace;
   padding: 0px;
   min-width: 1px; } */


/* Color tabs in different colors regarding if they are active or not

tab {
   background-image: -moz-linear-gradient(left center, transparent, transparent 1px, #FFCCCC 1px, #FFCCCC) !important;
   opacity: 0.45 !important; }
tab[selected="true"] {
   background-image: -moz-linear-gradient(left center, green, blue) !important;
   opacity: 1 !important; }
tab:hover {
   opacity: 1 !important; } */


/* Logo menu button

#toolbar-menubar>toolbarbutton>dropmarker {
   list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAATCAYAAABsmQZ/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAfdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCA/Pz8/Pz8gMy41LjXnygNhAAAESUlEQVRIS42VWU9bVxDH7zcCRYqagmNsyEPf2+apjRS1SgMGQonAJixp8G5sMAQCMSGRmtKGhMV4t8GkEomxDV4wUOOVpdBHvsK/c861ARM/cKWfZs42/zn3nntGODw6QmPTHZye/oed3T3s7l2wR/7e3j+XKI2V5zFbBRangp1Sm+zR0TGEsujJ6akoWuaS+Hkil8a/CFxNiIldgYseHLKdNoGLVpnE+yhgqjRWtuLcXeqv5HIMNvfquCh6cAh5YxPfdiyeQJxgtkw8nqxox2KV45fb8QStTySrQ3HYWKF4AKFQPIRM1oh8oYhQKHLBRjU/jM8hkVCZjTA2GOEIwoxIFBGC2TKRyCb1MaLI5fIQ8vkipFI5HZZ9+P1BkUA1u0pjlQQCqwisrGKFsRrEanANQcbaR6yd8zf5F7AzI2QyBdTXNyCZ3MHysreE58J3sD7WZrgJF8fhIJxuOF0euAiPxwuv1wefzw+fP0AJlgis0CYYlDCxvZ2CkE7nceuWFJubSczN2b/g/Xs7RJY4c3OLZBfw4cMi5ueXML+whMVFO+z2ZSw7nJSEi5Jww+X2wM3xilBSbo+PnxlhdzeHmzclFMSJzs4BPH78FF1dIt3dvxHMH8CP99rw7d0H1+L+Tx0wGEwwmoZg4phLWCg5B4Tt7Qxu3KjD7OwSWlpUUBCtCrIKJVpblWhrUxFKLnbdh81Vq7XQaHTQaHXQ6vTQcQxYoDcjJBP7qK39Gm/fLuCXB11obu4muigBEYWimxLp4qJnZ2fXoiyqZqIaPUerNXC4aCKeRk3NLRJdwsOHSrQ0K0mktEu2U6K1tZuLnpycXAsuqmEiRtqlkXZogl7PGMICfX8hkUijtuYrvHvnpNfYj/ZHfXjE6OjDr50X/HBPca3vyQTv/9wBrcECvXEYBuMIYeUYTVYs2V30epNpfpAW5t3o6dFDqdRAqWKooSLb06NGzxMNVGRVqkHqf0b+IJ70qtHbr0XfgA5PnxkxqB6CVs9ERmEyj2OIMFsmYBl+QUye43D6IaRS+5DLv6H/zg+zeYoOwAh9fEIjWi3ztcPUFhlUmzkarQUa3TB0erYLUYgFt47aMPZ8BmPjM3g+8RrjL95wJkp4fWsQ1tejdHA60N7eQf9WELbpWb7IOjqNEcI6RjDf+hKWkSke2Mwhn7WtUzTPhtHxVxiffINJ2++Ymv4DL1/NwjbzJ6Zf/wUbwSwj+PETBPasr4cgl92hk9rOr7NYLEX3ZOyccDhGd+sWQhtRunej+PQ5Ugn1hTY26a6lNdEEoltJbDJi20QKW0TZMp+LsodVk/7eAXz/3V00yhspCYJbORUEORqkMty+LYVEIqFrU4K6uvoK6qlfQuNSmtfQIONrWCGRUYyrnIsyJ53O4Pj4XxEqdQxW8o6o5rISWCwWkc8XeKXIZnOcTCaLTDaLbC6HHI2xalUoHPASVqQKVmTrrvA/8KJW0ZMmlNcAAAAASUVORK5CYII=") !important;
   -moz-box-shadow: none !important;
   background: none !important;
   padding: 0 !important;
   border: 0 !important;
   margin: 0 !important; 
   display: none !important; }

#appmenu-button {
   border-top: white !important;
   margin-left: 4px !important;
   margin-top: 1px !important; } */


/* Make urlbar and searchbar have a half-transparent background

.searchbar-textbox, #urlbar {
   opacity: 1 !important;
   -moz-appearance: none !important;
   background: transparent !important;
   color: black !important;
   text-shadow: white 2px -2px 4px, white -2px 2px 4px, white -2px -4px 4px, white 2px 4px 4px !important; } */

/*----------------------------------------------------------*/


А ещё мои нежные глазки любят напрягать всякие сайты с чёрным текстом на белом фоне. А я люблю наоборот, поэтому для часто посещаемых сайтов (вроде хабра, дёти, лепры, ну и для вконтактика, которым раньше я тоже активно пользовался) я понаписал стилей, снимающих напряг с глаз.
Ну и на последок, для любителей Menu Button порекомендую этот стиль, который имеет в себе настройки и позволяет убрать слова "Firefox" или "Nightly" из этой кнопки, сделав её более компактной, а так же умеет перекидывать таб-бар в самую верхнюю строку. В моём "chrome" коде кстати тоже есть кусок выдранный из этого стиля и подстроенный мною под себя.


mzfx

Отсутствует

 

№47727-05-2011 04:14:25

Крошка Ру
Участник
 
Группа: Extensions
Зарегистрирован: 19-10-2008
Сообщений: 8718
UA: Nightly 7.0

Re: Stylish

...торгану тем, что у меня стоит (из чего многое писал сам)

iDev.Pi :beer:

Отредактировано Крошка Ру (27-05-2011 04:14:46)

Отсутствует

 

№47827-05-2011 14:47:46

Raf-9600
Участник
 
Группа: Members
Зарегистрирован: 15-05-2007
Сообщений: 560
UA: Firefox 4.0

Re: Stylish

iDev.Pi пишет

спасибо за стиль, понравился (правда надо бы его доделать, чтобы показывал информацию о выбранном элементе, а то совсем всё резать - не правильно.

Абсолютно согласен! Если доделаете его - маякните в этой теме ;)

iDev.Pi пишет

Link style and color protection - некоторые сайты маскируют ссылки на страницах под обычный текст

На Fx4 без проблем работает. Но то что он подчеркивает абсолютно все ссылки, немного портит дизайн.

iDev.Pi пишет

Direct links indicator - его предназначение ясно из скриншота

Аще прелесть! Теперь буду красивенькие иконки для него искать %)

upd
Правда заметил неприятную особенность, добавленные иконки иногда деформируют разметку страницы, пример http://leconte.deviantart.com/gallery/#/do6ny0

Отредактировано Raf-9600 (27-05-2011 15:20:18)


Иногда мне кажется, что лучшие программисты мира и лучшие технические умы работают только над одним - как сделать так, чтоб на новом скоростном железе тормозило также, как на хламе 10 летней давности.
(с)

Отсутствует

 

№47927-05-2011 15:36:55

iDev.Pi
баг-репортёр
 
Группа: Extensions
Зарегистрирован: 31-01-2010
Сообщений: 2718
UA: Nightly 7.0

Re: Stylish

Raf-9600 пишет

Аще прелесть! Теперь буду красивенькие иконки для него искать %)

найдёшь/нарисуешь все в одном стиле красивые какие-нибудь - дай знать.

Raf-9600 пишет

На Fx4 без проблем работает.

вряд ли оно работает так же как на [nightly]: при наведении на ссылку в [firefox] 4 - она же не подчеркнётся волнистой линией как в [nightly]?

Raf-9600 пишет

Но то что он подчеркивает абсолютно все ссылки, немного портит дизайн.

да, от этого, я думаю не убежать - но это вообще-то и цель всего стиля - отобразить ВСЕ имеющиеся видимые ссылки на странице.
Это просто у меня моя паранойя которая мне говорит, что от меня кто-то может утаить информацию, и по этому с ними надо бороться - не думаю, что кому-то без паранойи нужен этот стиль.

Raf-9600 пишет

Абсолютно согласен! Если доделаете его - маякните в этой теме ;)

на досуге думаю доделать, ок - маякну.

Raf-9600 пишет

Правда заметил неприятную особенность, добавленные иконки иногда деформируют разметку страницы,

да, от этого не убежать, ведь мы физически удлиняем ссылку на ~16 пикселей, + догоняем высоту ссылки до тех же ~16 пикселей.
Соответственно в 1-ом случае ссылка на странице может находится в табличной ячейке рассчитанной под её точную длину, а мы туда ещё 16 пикселей по горизонтали добавляем, и ссылка сдвигается вправо. Правда сама иконка тоже кликабельна, так что на функционал это не должно влиять, только на эстетику: разметка поехала и стало не так красиво.
А во 2-ом случае если ссылка была написана мелким шрифтом (меньше 16 пикселей на строку) - то она таки будет увеличена до этих 16-ти.
Если где-то этот сдвиг разметки пагубно влияет на функционал, то можно в код везде дописать :not(:hover) и тогда при наведении на такую ссылку с иконкой - иконка будет исчезать. Правда навести более чем на 1 ссылку в 1 момент времени - конечно же не получится.
А можно просто кастомизировать стиль под себя: добавлять в качестве исключений страницы/сайты, на которых ему не стоит срабатывать.

Придумаете как этого избежать - я могу попробовать написать новый код.
Ну то есть можно ссылкам картинки эти в качестве фоне подставлять, например. Но тогда IMG-ссылка либо потеряет свою IMG, что функциональный урон наносит, либо не будет иметь этот маячок, что ссылка ведёт напрямую на файл какого-то расширения - т.е. в этом случае стиль просто не даст нам никакого преимущества (что нет его, что есть).
Можно :before заменить на :after чтобы иконка была в конце ссылки, но всех проблем это тоже не решит.


mzfx

Отсутствует

 

№48027-05-2011 16:26:46

iDev.Pi
баг-репортёр
 
Группа: Extensions
Зарегистрирован: 31-01-2010
Сообщений: 2718
UA: Nightly 7.0

Re: Stylish

iDev.Pi пишет

на досуге думаю доделать, ок - маякну.

в стиле заменяем
#list-view > #addon-list .description-container,
на
#addon-list > richlistitem:not([selected="true"]) > hbox > vbox:last-child > hbox:last-child > vbox:first-child > hbox:first-child > label[class="description"],


mzfx

Отсутствует

 

№48127-05-2011 16:42:08

Raf-9600
Участник
 
Группа: Members
Зарегистрирован: 15-05-2007
Сообщений: 560
UA: Firefox 4.0

Re: Stylish

iDev.Pi пишет

найдёшь/нарисуешь все в одном стиле красивые какие-нибудь - дай знать.

Обязательно.

iDev.Pi пишет

при наведении на ссылку в [firefox] 4 - она же не подчеркнётся волнистой линией как в [nightly]?

Нет %)

iDev.Pi пишет

да, от этого, я думаю не убежать - но это вообще-то и цель всего стиля - отобразить ВСЕ имеющиеся видимые ссылки на странице.

Ну в идеале, этот скрипт был бы мастхэвным для всех, если бы подчеркивал только те ссылки, которые

iDev.Pi пишет

не отличить от обычного текста (а в ряде случаев - это нельзя сделать, даже при наведении на них курсором)

Но это наверно уже фантастика %)


iDev.Pi пишет

Можно :before заменить на :after чтобы иконка была в конце ссылки, но всех проблем это тоже не решит.

Это однозначно не подходит, ибо если указана прямая, не "скрытая" ссылка, то в конце и так будет видно расширение.

iDev.Pi пишет

Ну то есть можно ссылкам картинки эти в качестве фоне подставлять

Это уже вариант, но в плане дизайна это наверно будет не очень красиво.

iDev.Pi пишет

Но тогда IMG-ссылка либо потеряет свою IMG, что функциональный урон наносит, либо не будет иметь этот маячок, что ссылка ведёт напрямую на файл какого-то расширения - т.е. в этом случае стиль просто не даст нам никакого преимущества (что нет его, что есть).

Если я правильно понял, то Вы имеете ввиду что к примеру тут https://addons.mozilla.org/ru/firefox/addon/proxilla/ и тут http://userstyles.org/styles/20586/neon-link-focus (на этих сайтах) стиль не будет подставлять свою иконку в превьюшных картинках. Если так, то это совсем не недостаток, а ИМХО огромное достоинство! Ибо в превьюшках иконки нафиг не нужны.

iDev.Pi пишет

Придумаете как этого избежать

Единственный вариант что пришел мне в голову, это сузить текст на эти ~16 пиксилей. Можно к примеру на всех таких ссылках использовать какой-то особый симпатичный, и одновременно узкий шрифт. Но тогда если текст был очень маленького размера, то после такой "кастомизации" его вобще нельзя будет прочитать.
Вобще, в идеале, было бы классно если бы стиль был умным, и сам решал, когда нужно сузить текст (чтоб не деформировал разметку, как на deviantart), а когда сужать ничего не нужно (как на этом форуме).


Иногда мне кажется, что лучшие программисты мира и лучшие технические умы работают только над одним - как сделать так, чтоб на новом скоростном железе тормозило также, как на хламе 10 летней давности.
(с)

Отсутствует

 

№48227-05-2011 16:47:41

iDev.Pi
баг-репортёр
 
Группа: Extensions
Зарегистрирован: 31-01-2010
Сообщений: 2718
UA: Nightly 7.0

Re: Stylish

Raf-9600 пишет

Но это наверно уже фантастика %)

нет, это, я думаю, как раз таки можно сделать. Но ведь ещё возможен вариант, когда сайт ссылке может просто назначить цвет её подчёркивания совпадающий с фоном - тогда мой стиль будет её обходить, а для пользователя она по прежнему будет выглядеть как текст.


mzfx

Отсутствует

 

№48327-05-2011 16:50:56

Raf-9600
Участник
 
Группа: Members
Зарегистрирован: 15-05-2007
Сообщений: 560
UA: Firefox 4.0

Re: Stylish

iDev.Pi пишет

в стиле заменяем
#list-view > #addon-list .description-container,
на
#addon-list > richlistitem:not([selected="true"]) > hbox > vbox:last-child > hbox:last-child > vbox:first-child > hbox:first-child > label[class="description"],

ИМХО не совсем идеально получилось. Если у аддона длинное описание, и на него кликнуть, то появляется нижняя полоска прокрутки. По-моему, гораздо удобнее было бы еслиб Вы сделали так как в аддоне Slim Add-on Manager, т.е. чтоб описание появлялось не сбоку от названия аддона, а под ним, и не растягивало страницу.


Иногда мне кажется, что лучшие программисты мира и лучшие технические умы работают только над одним - как сделать так, чтоб на новом скоростном железе тормозило также, как на хламе 10 летней давности.
(с)

Отсутствует

 

№48427-05-2011 17:07:09

iDev.Pi
баг-репортёр
 
Группа: Extensions
Зарегистрирован: 31-01-2010
Сообщений: 2718
UA: Nightly 7.0

Re: Stylish

Raf-9600 пишет

Если так, то это совсем не недостаток, а ИМХО огромное достоинство! Ибо в превьюшках иконки нафиг не нужны.

а ведь и правда, наверное стоит так сделать.

Raf-9600 пишет

Единственный вариант что пришел мне в голову, это сузить текст на эти ~16 пиксилей.

что в ряде случаев приведёт к нечитаемости текста, что не вариант

Raf-9600 пишет

Вобще, в идеале, было бы классно если бы стиль был умным, и сам решал, когда нужно сузить текст, а когда сужать ничего не нужно

ну если заморочиться - то можно расписать, под мелкие font-size применять масштабируемость картинки (уменьшать её).
надо для этого в стиль дописать что-то типа:
:-moz-any-link[fontsize="12px"]:before { width: 12px; height: 12px; }
:-moz-any-link[fontsize="11px"]:before { width: 11px; height: 11px; }
и так под разные размеры шрифта.
По идее должно помочь, но я лично против ссылок мелким шрифтом - да и не так сильно эти мелкие 16х16 пикселевые иконки портят разметку страниц. На мой взгляд и так, как есть сейчас - вполне терпимо.


mzfx

Отсутствует

 

№48527-05-2011 17:14:07

Raf-9600
Участник
 
Группа: Members
Зарегистрирован: 15-05-2007
Сообщений: 560
UA: Firefox 4.0

Re: Stylish

iDev.Pi пишет

Придумаете как этого избежать

Ещё есть мысль сделать "щадящий" вариант. К примеру подставлять иконку только к не "скрытым" ссылкам, а вместо "http://" подставлять иконку. К примеру вместо https://addons.mozilla.org/ru/firefox/addon/proxilla/ чтоб было [ИКОНКА]addons.mozilla.org/ru/firefox/addon/proxilla/ Минус только в том, что таких, не скрытых за текстом ссылок, в интернете меньшинство.

Есть ещё один вариант: иконку вставлять не в саму страницу, а в статус-бар. Вот так http://i22.fastpic.ru/big/2011/0527/cd/a22c6ad0f56dad8a3c3afb29ee6ed5cd.jpg

Третий вариант: показывать иконку всетаки на странице, но только когда на неё наведен курсор. Но этот вариант всеравно может деформировать разметку, вместо него лучше уш чтоб сам курсор менялся в зависимости от расширения файла на который он наведен.

Отредактировано Raf-9600 (27-05-2011 17:15:48)


Иногда мне кажется, что лучшие программисты мира и лучшие технические умы работают только над одним - как сделать так, чтоб на новом скоростном железе тормозило также, как на хламе 10 летней давности.
(с)

Отсутствует

 

№48627-05-2011 17:17:53

Kamui
Участник
 
Группа: Members
Зарегистрирован: 31-03-2011
Сообщений: 1796
UA: Firefox 4.0

Re: Stylish

Помогите со стилем:

скрытый текст

Выделить код

Код:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#urlbar:focus, .findbar-textbox.findbar-find-fast:focus {
-moz-box-shadow: 0px 0px 2px 2px rgba(0,0,255,.4) !important;
}

Целью является подсвечивание строки адреса и панели поиска когда они находятся в фокусе, пробовал указать псевдокласс "focus" к ним, но почему-то не работает, хотя при указании "hover" все прекрасно подсвечивается при наведении. Может я чего-то не знаю, только начал писать стили, так что помогите кто чем может. И еще, если не указывать псевдокласс, то они также подсвечиваются, но на постоянной основе!

Отредактировано Kamui (27-05-2011 17:18:21)

Отсутствует

 

№48727-05-2011 17:28:11

Raf-9600
Участник
 
Группа: Members
Зарегистрирован: 15-05-2007
Сообщений: 560
UA: Firefox 4.0

Re: Stylish

iDev.Pi пишет

По идее должно помочь, но я лично против ссылок мелким шрифтом

Ну вот к примеру всели сузить текст на deviantart (Download Image), то это никак не повредит ни читаемости, на разметке.
И да, можно сделать чтоб и без того мелкий текст, не сужался, тогда случаи повреждения разметки, будет сведены к минимуму.

Отредактировано Raf-9600 (27-05-2011 17:29:04)


Иногда мне кажется, что лучшие программисты мира и лучшие технические умы работают только над одним - как сделать так, чтоб на новом скоростном железе тормозило также, как на хламе 10 летней давности.
(с)

Отсутствует

 

№48827-05-2011 17:37:14

iDev.Pi
баг-репортёр
 
Группа: Extensions
Зарегистрирован: 31-01-2010
Сообщений: 2718
UA: Nightly 7.0

Re: Stylish

Raf-9600 пишет

Если у аддона длинное описание, и на него кликнуть, то появляется нижняя полоска прокрутки.

а, и правда :(
очень не хочется заморачиваться - почему там .description текст не хочет на другую строку перелезать, даже если родительскому элементу height увеличить
простенький фикс: добавьте в стиль
.description-container { max-width: 800px !important;}

Добавлено 27-05-2011 17:42:56

Raf-9600 пишет

Ещё есть мысль сделать "щадящий" вариант. К примеру подставлять иконку только к не "скрытым" ссылкам, а вместо "http://" подставлять иконку. К примеру вместо https://addons.mozilla.org/ru/firefox/addon/proxilla/ чтоб было [ИКОНКА]addons.mozilla.org/ru/firefox/addon/proxilla/ Минус только в том, что таких, не скрытых за текстом ссылок, в интернете меньшинство.

нормально это сделать не получится, CSS не позволяет по умному ссылки обрезать, будет очень не красиво.

Raf-9600 пишет

Есть ещё один вариант: иконку вставлять не в саму страницу, а в статус-бар. Вот так http://i22.fastpic.ru/big/2011/0527/cd/a22c6ad0f56dad8a3c3afb29ee6ed5cd.jpg

это можно сделать, только зачем? так на странице видно где прямые ссылки на файлы а где - нет, а так - придётся на каждую из n ссылок на странице наводить курсором чтобы глянуть в статусбар.

Raf-9600 пишет

Третий вариант: показывать иконку всетаки на странице, но только когда на неё наведен курсор.

та же претензия.

Raf-9600 пишет

лучше уш чтоб сам курсор менялся в зависимости от расширения файла на который он наведен.

А это и было в оригинальном стиле. Он кажется до сих пор на юзерстайлс.орг обитает.

Добавлено 27-05-2011 17:51:00
Kamui
так происходит, потому что ты хочешь, чтобы подсвечивался урл-бар, когда ты выбрал в :focus на самом деле не его, а один из его дочерних (или суб-суб-...-суб дочерних) элементов.
Если же это сияние приделать к этому дочернему элементу (textarea, куда мы текст вводим), то это будет выглядеть ужасно, т.к. это сияние будет внутри урлбара (и то, мы можем его не увидеть, из-за фиксированного позиционирования элементов внутри него).
В общем такого сделать стилем нельзя. Только скриптом.
А стилем если хочется выделить как-то выбранный textarea элемент то можно цветом выделить фон, например. Причём это можно сделать красиво, применив css-animation и сделав этот переход от одного цвета к другом - плавным.

Добавлено 27-05-2011 17:53:12

Raf-9600 пишет

Ну вот к примеру всели сузить текст на deviantart (Download Image), то это никак не повредит ни читаемости, на разметке.
И да, можно сделать чтоб и без того мелкий текст, не сужался, тогда случаи повреждения разметки, будет сведены к минимуму.

я вообще не вижу по той ссылке (http://leconte.deviantart.com/gallery/#/do6ny0) что ты мне дал, чтобы там где-то нарушалась разметка с моим стилем.

Отредактировано iDev.Pi (27-05-2011 17:53:12)


mzfx

Отсутствует

 

№48927-05-2011 17:58:39

Raf-9600
Участник
 
Группа: Members
Зарегистрирован: 15-05-2007
Сообщений: 560
UA: Firefox 4.0

Re: Stylish

iDev.Pi пишет

.description-container { max-width: 800px !important;}

Благодарю.

iDev.Pi пишет

это можно сделать, только зачем? так на странице видно где прямые ссылки на файлы а где - нет, а так - придётся на каждую из n ссылок на странице наводить курсором чтобы глянуть в статусбар.

Ну если у файла длинный адрес, и ссылка на этот файл находиться под текстом, то это единственный способ увидеть его расширение не скачивая. Хотя не спорю, часть функционала теряется. Зато разметка цела %)

Добавлено 27-05-2011 18:01:44

iDev.Pi пишет

я вообще не вижу по той ссылке (http://leconte.deviantart.com/gallery/#/do6ny0) что ты мне дал, чтобы там где-то нарушалась разметка с моим стилем.

У меня древний монитор, и разрешение экрана 1024:768 - http://i22.fastpic.ru/big/2011/0527/bc/10634663b31a2a67a06db83c3cc3ffbc.jpg

Отредактировано Raf-9600 (27-05-2011 18:02:19)


Иногда мне кажется, что лучшие программисты мира и лучшие технические умы работают только над одним - как сделать так, чтоб на новом скоростном железе тормозило также, как на хламе 10 летней давности.
(с)

Отсутствует

 

№49027-05-2011 18:04:29

iDev.Pi
баг-репортёр
 
Группа: Extensions
Зарегистрирован: 31-01-2010
Сообщений: 2718
UA: Nightly 7.0

Re: Stylish

Raf-9600 пишет

Ну если у файла длинный адрес, и ссылка на этот файл находиться под текстом, то это единственный способ увидеть его расширение не скачивая. Хотя не спорю, часть функционала теряется. Зато разметка цела %)

в принципе, тогда стиль будет срабатывать только при наведении. Если такое условие устраивает - то тогда нет и особой разницы где будет иконка - в статусбаре или в курсоре. А если так:
Cursor Indicator

скрытый текст
1183_after.png

Добавлено 27-05-2011 18:05:52

Raf-9600 пишет

http://i22.fastpic.ru/big/2011/0527/bc/10634663b31a2a67a06db83c3cc3ffbc.jpg

ааа, такое и у меня тоже есть, просто это настолько мелочь, что я подумал, что ты о чём то другом.

Отредактировано iDev.Pi (27-05-2011 18:06:29)


mzfx

Отсутствует

 

№49127-05-2011 18:46:08

iDev.Pi
баг-репортёр
 
Группа: Extensions
Зарегистрирован: 31-01-2010
Сообщений: 2718
UA: Nightly 7.0

Re: Stylish

Raf-9600 пишет

Ну в идеале, этот скрипт был бы мастхэвным для всех, если бы подчеркивал только те ссылки, которые
   

iDev.Pi пишет

не отличить от обычного текста (а в ряде случаев - это нельзя сделать, даже при наведении на них курсором)

Но это наверно уже фантастика %)

iDev.Pi пишет

нет, это, я думаю, как раз таки можно сделать. Но ведь ещё возможен вариант, когда сайт ссылке может просто назначить цвет её подчёркивания совпадающий с фоном - тогда мой стиль будет её обходить, а для пользователя она по прежнему будет выглядеть как текст.

для этого в том стиле надо заменить:
:-moz-any-link
на
a[onclick], a[text-decoration="none"], *[role="link"]

Raf-9600 пишет

Если я правильно понял, то Вы имеете ввиду что к примеру тут https://addons.mozilla.org/ru/firefox/addon/proxilla/ и тут http://userstyles.org/styles/20586/neon-link-focus (на этих сайтах) стиль не будет подставлять свою иконку в превьюшных картинках. Если так, то это совсем не недостаток, а ИМХО огромное достоинство! Ибо в превьюшках иконки нафиг не нужны.

для этого в стиле нужно убрать все строки вида:
, a[href*=".png?"]:before, a[href*=".PNG?"]:before
, a[href*=".jpg?"]:before, a[href*=".JPG?"]:before
Но на самом деле это поможет только на том сайте, на страницах такого типа это не помогает.

Отредактировано iDev.Pi (27-05-2011 18:57:30)


mzfx

Отсутствует

 

№49227-05-2011 19:27:59

Raf-9600
Участник
 
Группа: Members
Зарегистрирован: 15-05-2007
Сообщений: 560
UA: Firefox 4.0

Re: Stylish

iDev.Pi пишет

ааа, такое и у меня тоже есть, просто это настолько мелочь, что я подумал, что ты о чём то другом.

Ну да, покачто это единичный случай.

iDev.Pi пишет

для этого в том стиле надо заменить:
:-moz-any-link
на
a[onclick], a[text-decoration="none"], *[role="link"]

Прикольно, на этом форуме подчеркнуло кнопку "Цитировать" :)
Но всеравно стиль стал юзабельней, Спасибо!

iDev.Pi пишет

для этого в стиле нужно убрать все строки вида:
, a[href*=".png?"]:before, a[href*=".PNG?"]:before
, a[href*=".jpg?"]:before, a[href*=".JPG?"]:before

Убрал, теперь на https://addons.mozilla.org/ru/firefox/addon/proxilla/ вместо иконки расширения картинки, появилась иконка https, а тут http://userstyles.org/styles/20586/neon-link-focus вобще ничего не изменилось.

iDev.Pi пишет

Но на самом деле это поможет только на том сайте, на страницах такого типа это не помогает.

А есть возможность добавить Яндекс.Картинки в "черный список", чтоб там стиль не работал? К слову, в этот список нужно ещё upload.com.ua занести.

upd
Ктонить может подкорректировать каконить из этих скриптов:
http://userstyles.org/styles/42771/firefox-4-os-x-download-statusbar
http://userstyles.org/styles/46213/firefox-4-os-x-download-statusbar-slim
Чтоб при наведении курсора на скачиваемый файл, шрифт был хоть немного похож на тот что на скриншоте?

Отредактировано Raf-9600 (27-05-2011 20:49:29)


Иногда мне кажется, что лучшие программисты мира и лучшие технические умы работают только над одним - как сделать так, чтоб на новом скоростном железе тормозило также, как на хламе 10 летней давности.
(с)

Отсутствует

 

№49327-05-2011 21:40:32

mserv
Участник
 
Группа: Members
Зарегистрирован: 15-11-2008
Сообщений: 1025
UA: Firefox 4.0

Re: Stylish

А мне нравится, как преобразует ссылки Colored links

Отсутствует

 

№49427-05-2011 22:31:51

Raf-9600
Участник
 
Группа: Members
Зарегистрирован: 15-05-2007
Сообщений: 560
UA: Firefox 4.0

Re: Stylish

mserv
Мм, спасибо за сайт, там есть просто гениальный скрипт "Night.css". Правда он текущий форум неверно отображает.
Кстати, нашел способ повесть лисицу тому, у кого установлен Direct links indicator, нужно просто перейти по ссылке типа http://www.night.css/ %)

P.S.
На страничке форума, посвященного "Night.css", есть весьма толковые идеи касательно его развития. К примеру:
1. Прикрутить регулятор яркости.
2. Сделать чтоб для заранее заданных сайтов, этот скрипт применялся автоматически
3. Возможность включения\отключения затемнения изображений.

P.P.S.
oper.ru с ним выглядит великолепно!

P.P.P.S.
Чесно, никогда не понимал, зачем делать отдельные скрипты для затемнения гугли\хабры\лепры, если можно сворганить что-то универсальное?

P.P.P.P.S
Оказывается для Лисички есть корректный аналог - Global Dark Style но вышеупомянутых настроек всеравно нехватает %)

Отредактировано Raf-9600 (27-05-2011 23:24:49)


Иногда мне кажется, что лучшие программисты мира и лучшие технические умы работают только над одним - как сделать так, чтоб на новом скоростном железе тормозило также, как на хламе 10 летней давности.
(с)

Отсутствует

 

№49527-05-2011 23:26:58

mserv
Участник
 
Группа: Members
Зарегистрирован: 15-11-2008
Сообщений: 1025
UA: Firefox 4.0

Re: Stylish

Raf-9600 пишет

скрипт "Night.css".

Так он вроде как для Оперы? В Стилиш я его засунул, но никаких кнопок, ползунков, как там рассказывают, не наблюдаю.

Отсутствует

 

№49627-05-2011 23:35:33

Raf-9600
Участник
 
Группа: Members
Зарегистрирован: 15-05-2007
Сообщений: 560
UA: Firefox 4.0

Re: Stylish

mserv
Про кнопки-ползунки не знаю, но гугля\хабр\опер.ру успешно преобразились %)
Вот Global Dark Style кстати, кроме самого сайта, меняет ещё и курсоры, ползунки, и т.д. Только он темнее чем Night.css.


Иногда мне кажется, что лучшие программисты мира и лучшие технические умы работают только над одним - как сделать так, чтоб на новом скоростном железе тормозило также, как на хламе 10 летней давности.
(с)

Отсутствует

 

№49728-05-2011 01:09:17

Raf-9600
Участник
 
Группа: Members
Зарегистрирован: 15-05-2007
Сообщений: 560
UA: Firefox 4.0

Re: Stylish

iDev.Pi пишет

очень не хочется заморачиваться - почему там .description текст не хочет на другую строку перелезать, даже если родительскому элементу height увеличить

Решил проблему совмещением Slim Add-on Manager с Add-Ons Manager Lite. Теперь даже самые длинные описания не вызывают полосу прокрутки.

Нашел ещё два прикольных стиля:
http://userstyles.org/styles/19308/awesomebar-popup
http://userstyles.org/styles/47791/fx4-aero-dialog-box

P.S.
Если ктонить знает ещё какиенить полезные\красивые стили, будьте добры сообщить об этом в этой теме ^_-


Иногда мне кажется, что лучшие программисты мира и лучшие технические умы работают только над одним - как сделать так, чтоб на новом скоростном железе тормозило также, как на хламе 10 летней давности.
(с)

Отсутствует

 

№49828-05-2011 01:54:38

mserv
Участник
 
Группа: Members
Зарегистрирован: 15-11-2008
Сообщений: 1025
UA: Firefox 4.0

Re: Stylish

Для экономии места Autohide Dropmarkers

Добавлено 28-05-2011 02:02:11
Что бы глаза отдыхали Global gray sadness

Отредактировано mserv (28-05-2011 02:02:11)

Отсутствует

 

№49928-05-2011 11:35:14

MySh
Кактусогрыз
 
Группа: Extensions
Зарегистрирован: 17-12-2006
Сообщений: 4623
UA: Firefox 4.0

Re: Stylish

Подскажите, пожалуйста, можно ли каким-то образом применить параметры стиля только к тем ссылкам, внутри которых нет тэга IMG?

Отсутствует

 

№50028-05-2011 14:03:23

iDev.Pi
баг-репортёр
 
Группа: Extensions
Зарегистрирован: 31-01-2010
Сообщений: 2718
UA: Nightly 7.0

Re: Stylish

Raf-9600 пишет

P.P.P.S.
Чесно, никогда не понимал, зачем делать отдельные скрипты для затемнения гугли\хабры\лепры, если можно сворганить что-то универсальное?

P.P.P.P.S
Оказывается для Лисички есть корректный аналог - Global Dark Style но вышеупомянутых настроек всеравно нехватает %)

потому, что, пользуясь ими, ты потом тоже заметишь, что некоторые картинки (выставленные как фон для элементов) ты не видишь с этими стилем.
я тоже начинал с глобальных стилей которые действуют на все страницы сразу - у меня там в списке моих стилей был matrix - global style - то же самое (только совсем без рюшечек).
вот зайди с таким стилем на http://dirty.ru/ и найди там птичку в левом верхнем углу.

Добавлено 28-05-2011 14:05:13

MySh пишет

только к тем ссылкам, внутри которых нет тэга IMG

в смысле внутри? внутри как дочерий элемент или внутри в смысле что ссылка-картинка?
если 1-ое - то нельзя никак.
если 2-ое - :-moz-any-link:not(IMG)

Добавлено 28-05-2011 14:20:32

Raf-9600 пишет

Оказывается для Лисички есть корректный аналог - Global Dark Style

ага, посмотри как он этот форум отображает под аватаром и репутацией серый квадрат некрасивый

Отредактировано iDev.Pi (28-05-2011 14:20:32)


mzfx

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]