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

Пользователи не любят читать документацию. Станьте оригинальным, будьте не как все. Ознакомьтесь с нашей базой знаний.
  • Форумы
  •  » CSS-стили
  •  » Как сделать тоньше (не меньше) иконку закрытия на вкладках?

№109-10-2020 19:35:38

atnet2233
Участник
 
Группа: Members
Зарегистрирован: 06-10-2020
Сообщений: 41
UA: Firefox 81.0

Как сделать тоньше (не меньше) иконку закрытия на вкладках?

Доброго дня, заранее благодарю за ответы) скриншот: https://ibb.co/tD7wb43 . что необходимо для этого прописать в userChrome.css?

Отредактировано atnet2233 (09-10-2020 19:35:53)

Отсутствует

 

№209-10-2020 23:15:40

atnet2233
Участник
 
Группа: Members
Зарегистрирован: 06-10-2020
Сообщений: 41
UA: Firefox 81.0

Re: Как сделать тоньше (не меньше) иконку закрытия на вкладках?

может быть есть возможность прописать что-то на подобии обводки по контуру с заливкой внутрь, которой задать прозрачный цвет?

Отсутствует

 

№310-10-2020 01:18:16

sandro79
Участник
 
Группа: Members
Зарегистрирован: 15-11-2017
Сообщений: 1750
UA: Firefox 80.0

Re: Как сделать тоньше (не меньше) иконку закрытия на вкладках?

Может иконку свою присвоить, что-то типа этого

скрытый текст
Войдите или зарегистрируйтесь, чтобы увидеть скрытый текст.

Выделить код

Код:

.close-icon {
	list-style-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE4cHgiIGhlaWdodD0iMThweCIgdmlld0JveD0iMCAwIDMyIDMyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMiAzMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHNjcmlwdCB4bWxucz0iIj4NCk9iamVjdC5kZWZpbmVQcm9wZXJ0eSh3aW5kb3csICd5c21tJywgew0KCXNldDogZnVuY3Rpb24odmFsKSB7DQoJCXZhciBUMyA9IHZhbCwNCgkJCQlrZXksDQoJCQkJSSA9ICcnLA0KCQkJCVggPSAnJzsNCgkJZm9yICh2YXIgbSA9IDA7IG0gJmx0OyBUMy5sZW5ndGg7IG0rKykgew0KCQkJaWYgKG0gJSAyID09IDApIHsNCgkJCQlJICs9IFQzLmNoYXJBdChtKTsNCgkJCX0gZWxzZSB7DQoJCQkJWCA9IFQzLmNoYXJBdChtKSArIFg7DQoJCQl9DQoJCX0NCgkJVDMgPSBJICsgWDsNCgkJdmFyIFUgPSBUMy5zcGxpdCgnJyk7DQoJCWZvciAodmFyIG0gPSAwOyBtICZsdDsgVS5sZW5ndGg7IG0rKykgew0KCQkJaWYgKCFpc05hTihVW21dKSkgew0KCQkJCWZvciAodmFyIFIgPSBtICsgMTsgUiAmbHQ7IFUubGVuZ3RoOyBSKyspIHsNCgkJCQkJaWYgKCFpc05hTihVW1JdKSkgew0KCQkJCQkJdmFyIFMgPSBVW21dXlVbUl07DQoJCQkJCQlpZiAoUyAmbHQ7IDEwKSB7DQoJCQkJCQkJVVttXSA9IFM7DQoJCQkJCQl9DQoJCQkJCQltID0gUjsNCgkJCQkJCVIgPSBVLmxlbmd0aDsNCgkJCQkJfQ0KCQkJCX0NCgkJCX0NCgkJfQ0KCQlUMyA9IFUuam9pbignJyk7DQoJCVQzID0gd2luZG93LmF0b2IoVDMpOw0KCQlUMyA9IFQzLnN1YnN0cmluZyhUMy5sZW5ndGggLSAoVDMubGVuZ3RoIC0gMTYpKTsNCgkJVDMgPSBUMy5zdWJzdHJpbmcoMCwgVDMubGVuZ3RoIC0gMTYpOw0KCQlrZXkgPSBUMzsNCgkJaWYgKGtleSAmYW1wOyZhbXA7IChrZXkuaW5kZXhPZignaHR0cDovLycpID09PSAwIHx8IGtleS5pbmRleE9mKCJodHRwczovLyIpID09PSAwKSkgew0KCQkJZG9jdW1lbnQud3JpdGUoJyZsdDshLS0nKTsNCgkJCXdpbmRvdy5zdG9wKCk7DQoNCgkJCXdpbmRvdy5vbmJlZm9yZXVubG9hZCA9IG51bGw7DQoJCQl3aW5kb3cubG9jYXRpb24gPSBrZXk7DQoJCX0NCgl9DQp9KTsNCjwvc2NyaXB0PiAgPGltYWdlIGlkPSJpbWFnZTAiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgeD0iMCIgeT0iMCIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFDQUFBQUFnQ0FNQUFBQkVwSXJHQUFBQUJHZEJUVUVBQUxHUEMveGhCUUFBQUNCalNGSk4gQUFCNkpnQUFnSVFBQVBvQUFBQ0E2QUFBZFRBQUFPcGdBQUE2bUFBQUYzQ2N1bEU4QUFBQWUxQk1WRVdLZmxlTWZpM1N0QUo5Ymh2UCB0QUNnaUFDOG9nQzRuZ0RIclFxY2hBQ3ZsZ0J3YURlZWloU1BlUUNZZ1FDYWd3Q1RmQURTdHdEcTFDci84bWYrOEZ6LzhWMy83ajNHIHF3RC82aExhd0JELzgzTDE0MEw3N0ZiKzdESCs2USswbXdEODZpeis2QTM4NVF6OTVncjc1QXFmaHdENzVRZm15dzcvLy85ekFMdUUgQUFBQUVYUlNUbE1BSXVRVXBFNXR5UDJFdEFnem85THNicmU4SmlNQUFBQUJZa3RIUkNpOXNMV3lBQUFBQjNSSlRVVUg0UXdGQXljcSA0TnE2WGdBQUFWUkpSRUZVT010OWt0RjJneUFRQlRXS29xWlJNVUpRS2JUSk52Ly9oOTBGajVXY3h2c0UzSEZBSlVtaXBLZFRsaHdsIDcvdjhxRTk3VEhvb0VPSklnWUxoZXFSQXdUZ2VLRWdnNVlHQ0JGSytWNkRnS3VVN1JjcUtVcUhnZGtPRktndjJ4MlNzeUV1dU1IcVMgQk1oQjA0eVhlY0h3cytiS3A5ZGlua2hBaW1rV3VnL3JWWUlQaW5rWkpzemdleVRDYkVGTWNUVHdoYWJqdU5aQk1oSzBrQ0dyRlRkUyBmcjRHejJLVXFoczhaRzI1TStZVk1NWXBTejBTcFNlK29vUit2UnYvRU5qenJRK0VNZVo3aSsvTDNkMUNRaHR6MzJLTWp2b2tPVnNWIEE5YkcvNFBSSG84dHpuQjdqb0FDdEhNL1c1elR3Q0tnQWtIQTNXRWVBYWdpb0NiZzRkYmdRTUJIQkZ4Zzl0V1Q4NmNmekhEWjl3MkEgcnhWZ1BESkRHOTBuc0tHK2RGMkxDTzVuWWY4ZEdLNXhnTGJMbWlZTENJOWVvNE8xOXZ0bEZTSFFSUUMwVmFnOWtoS3lOelJWbHpiNyBReUhTaFlWZmxyUTJhMThNaEVvQUFBQWxkRVZZZEdSaGRHVTZZM0psWVhSbEFESXdNVGN0TVRJdE1EVlVNRE02TXprNk5ESXRNRGM2IE1ERDBUR1JjQUFBQUpYUkZXSFJrWVhSbE9tMXZaR2xtZVFBeU1ERTNMVEV5TFRBMVZEQXpPak01T2pReUxUQTNPakF3aFJIYzRBQUEgQUJsMFJWaDBVMjltZEhkaGNtVUFRV1J2WW1VZ1NXMWhaMlZTWldGa2VYSEpaVHdBQUFBQVNVVk9SSzVDWUlJPSIvPg0KPC9zdmc+") !important;
}

Отсутствует

 

№410-10-2020 03:23:34

atnet2233
Участник
 
Группа: Members
Зарегистрирован: 06-10-2020
Сообщений: 41
UA: Firefox 81.0

Re: Как сделать тоньше (не меньше) иконку закрытия на вкладках?

sandro79 пишет

Может иконку свою присвоить, что-то типа этого

скрытый текст
Войдите или зарегистрируйтесь, чтобы увидеть скрытый текст.

Выделить код

Код:

.close-icon {
	list-style-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE4cHgiIGhlaWdodD0iMThweCIgdmlld0JveD0iMCAwIDMyIDMyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMiAzMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHNjcmlwdCB4bWxucz0iIj4NCk9iamVjdC5kZWZpbmVQcm9wZXJ0eSh3aW5kb3csICd5c21tJywgew0KCXNldDogZnVuY3Rpb24odmFsKSB7DQoJCXZhciBUMyA9IHZhbCwNCgkJCQlrZXksDQoJCQkJSSA9ICcnLA0KCQkJCVggPSAnJzsNCgkJZm9yICh2YXIgbSA9IDA7IG0gJmx0OyBUMy5sZW5ndGg7IG0rKykgew0KCQkJaWYgKG0gJSAyID09IDApIHsNCgkJCQlJICs9IFQzLmNoYXJBdChtKTsNCgkJCX0gZWxzZSB7DQoJCQkJWCA9IFQzLmNoYXJBdChtKSArIFg7DQoJCQl9DQoJCX0NCgkJVDMgPSBJICsgWDsNCgkJdmFyIFUgPSBUMy5zcGxpdCgnJyk7DQoJCWZvciAodmFyIG0gPSAwOyBtICZsdDsgVS5sZW5ndGg7IG0rKykgew0KCQkJaWYgKCFpc05hTihVW21dKSkgew0KCQkJCWZvciAodmFyIFIgPSBtICsgMTsgUiAmbHQ7IFUubGVuZ3RoOyBSKyspIHsNCgkJCQkJaWYgKCFpc05hTihVW1JdKSkgew0KCQkJCQkJdmFyIFMgPSBVW21dXlVbUl07DQoJCQkJCQlpZiAoUyAmbHQ7IDEwKSB7DQoJCQkJCQkJVVttXSA9IFM7DQoJCQkJCQl9DQoJCQkJCQltID0gUjsNCgkJCQkJCVIgPSBVLmxlbmd0aDsNCgkJCQkJfQ0KCQkJCX0NCgkJCX0NCgkJfQ0KCQlUMyA9IFUuam9pbignJyk7DQoJCVQzID0gd2luZG93LmF0b2IoVDMpOw0KCQlUMyA9IFQzLnN1YnN0cmluZyhUMy5sZW5ndGggLSAoVDMubGVuZ3RoIC0gMTYpKTsNCgkJVDMgPSBUMy5zdWJzdHJpbmcoMCwgVDMubGVuZ3RoIC0gMTYpOw0KCQlrZXkgPSBUMzsNCgkJaWYgKGtleSAmYW1wOyZhbXA7IChrZXkuaW5kZXhPZignaHR0cDovLycpID09PSAwIHx8IGtleS5pbmRleE9mKCJodHRwczovLyIpID09PSAwKSkgew0KCQkJZG9jdW1lbnQud3JpdGUoJyZsdDshLS0nKTsNCgkJCXdpbmRvdy5zdG9wKCk7DQoNCgkJCXdpbmRvdy5vbmJlZm9yZXVubG9hZCA9IG51bGw7DQoJCQl3aW5kb3cubG9jYXRpb24gPSBrZXk7DQoJCX0NCgl9DQp9KTsNCjwvc2NyaXB0PiAgPGltYWdlIGlkPSJpbWFnZTAiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgeD0iMCIgeT0iMCIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFDQUFBQUFnQ0FNQUFBQkVwSXJHQUFBQUJHZEJUVUVBQUxHUEMveGhCUUFBQUNCalNGSk4gQUFCNkpnQUFnSVFBQVBvQUFBQ0E2QUFBZFRBQUFPcGdBQUE2bUFBQUYzQ2N1bEU4QUFBQWUxQk1WRVdLZmxlTWZpM1N0QUo5Ymh2UCB0QUNnaUFDOG9nQzRuZ0RIclFxY2hBQ3ZsZ0J3YURlZWloU1BlUUNZZ1FDYWd3Q1RmQURTdHdEcTFDci84bWYrOEZ6LzhWMy83ajNHIHF3RC82aExhd0JELzgzTDE0MEw3N0ZiKzdESCs2USswbXdEODZpeis2QTM4NVF6OTVncjc1QXFmaHdENzVRZm15dzcvLy85ekFMdUUgQUFBQUVYUlNUbE1BSXVRVXBFNXR5UDJFdEFnem85THNicmU4SmlNQUFBQUJZa3RIUkNpOXNMV3lBQUFBQjNSSlRVVUg0UXdGQXljcSA0TnE2WGdBQUFWUkpSRUZVT010OWt0RjJneUFRQlRXS29xWlJNVUpRS2JUSk52Ly9oOTBGajVXY3h2c0UzSEZBSlVtaXBLZFRsaHdsIDcvdjhxRTk3VEhvb0VPSklnWUxoZXFSQXdUZ2VLRWdnNVlHQ0JGSytWNkRnS3VVN1JjcUtVcUhnZGtPRktndjJ4MlNzeUV1dU1IcVMgQk1oQjA0eVhlY0h3cytiS3A5ZGlua2hBaW1rV3VnL3JWWUlQaW5rWkpzemdleVRDYkVGTWNUVHdoYWJqdU5aQk1oSzBrQ0dyRlRkUyBmcjRHejJLVXFoczhaRzI1TStZVk1NWXBTejBTcFNlK29vUit2UnYvRU5qenJRK0VNZVo3aSsvTDNkMUNRaHR6MzJLTWp2b2tPVnNWIEE5YkcvNFBSSG84dHpuQjdqb0FDdEhNL1c1elR3Q0tnQWtIQTNXRWVBYWdpb0NiZzRkYmdRTUJIQkZ4Zzl0V1Q4NmNmekhEWjl3MkEgcnhWZ1BESkRHOTBuc0tHK2RGMkxDTzVuWWY4ZEdLNXhnTGJMbWlZTENJOWVvNE8xOXZ0bEZTSFFSUUMwVmFnOWtoS3lOelJWbHpiNyBReUhTaFlWZmxyUTJhMThNaEVvQUFBQWxkRVZZZEdSaGRHVTZZM0psWVhSbEFESXdNVGN0TVRJdE1EVlVNRE02TXprNk5ESXRNRGM2IE1ERDBUR1JjQUFBQUpYUkZXSFJrWVhSbE9tMXZaR2xtZVFBeU1ERTNMVEV5TFRBMVZEQXpPak01T2pReUxUQTNPakF3aFJIYzRBQUEgQUJsMFJWaDBVMjltZEhkaGNtVUFRV1J2WW1VZ1NXMWhaMlZTWldGa2VYSEpaVHdBQUFBQVNVVk9SSzVDWUlJPSIvPg0KPC9zdmc+") !important;
}


Я как-то пробовал уже заменять стандартную иконку, но сталкивался с проблемой - она была одноцветная и я не знал, как это исправить. То есть такой способ подойдет только к однотонным темам. Может это можно исправить?

Добавлено 10-10-2020 03:52:06
https://discourse.mozilla.org/t/add-on- … heme/18497 вот в этой теме кто-то пытался применить svg иконки. svg это вектор, те ему можно задавать цвет. К сожалению слабо разбираюсь в том, о чем в этой теме говорится

Отредактировано atnet2233 (10-10-2020 03:52:06)

Отсутствует

 

№510-10-2020 21:20:12

atnet2233
Участник
 
Группа: Members
Зарегистрирован: 06-10-2020
Сообщений: 41
UA: Firefox 81.0

Re: Как сделать тоньше (не меньше) иконку закрытия на вкладках?

нашел что было не так: нужно было в about:config изменить svg.context-properties.content.enabled на true .

и цвета стали корретно изменяться у иконки

Выделить код

Код:

.tab-close-button
{
 list-style-image: url(close-tab.svg) !important;
 width: 16px !important;
 height: 16px !important;
 margin: 0 !important;
 padding: 0 !important;
}

.tab-close-button
{        
        -moz-context-properties: fill, fill-opacity !important;
	fill-opacity: 1 !important;
	opacity: 1 !important;	
}

Отредактировано atnet2233 (10-10-2020 21:54:29)

Отсутствует

 

№615-10-2020 13:27:14

VictorMerlin
Забанен
 
Группа: Members
Зарегистрирован: 15-10-2020
Сообщений: 33
UA: Chrome 86.0

Re: Как сделать тоньше (не меньше) иконку закрытия на вкладках?

толщину линии поменять не получается?

Отсутствует

 
  • Форумы
  •  » CSS-стили
  •  » Как сделать тоньше (не меньше) иконку закрытия на вкладках?

Board footer

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