commit a591627d63702bf6e00989bb65a538a8c4df2436 parent 54ccad67042c29569d72497a9582c502492485dc Author: Lootyhoof <lootyhoofer@gmail.com> Date: Tue, 25 Oct 2016 22:19:11 +0100 Update /global icons to use SVG Diffstat:
35 files changed, 171 insertions(+), 31 deletions(-)
diff --git a/src/chrome/browser/browser.css b/src/chrome/browser/browser.css @@ -1434,18 +1434,18 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon { padding: 0px; } +.tabbrowser-tab:not(:hover):not([selected="true"]) .tab-close-button { + opacity: .375; /* It is much faster to leave the normal image and change the opacity here --johnGraciliano */ +} + .tab-close-button:-moz-lwtheme-darktext { - list-style-image: url(chrome://global/skin/icons/close-bright.png); + filter: url("chrome://global/skin/icons/invert.svg#invert"); } .tab-close-button:-moz-system-metric(touch-enabled) { -moz-transform: scale(1.2); } -.tab-close-button:not([selected]):not(:hover):not(:active) { - -moz-image-region: rect(0, 64px, 16px, 48px); -} - .tab-close-button:focus { outline: none !important; } @@ -1615,6 +1615,10 @@ toolbarbutton[type="socialmark"] > .toolbarbutton-icon { border: none; } +.tabs-closebutton:-moz-lwtheme-darktext { + filter: url("chrome://global/skin/icons/invert.svg#invert"); +} + .tabs-closebutton > .toolbarbutton-icon { -moz-margin-end: 0px !important; -moz-padding-end: 2px !important; @@ -2216,6 +2220,10 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { -moz-appearance: none; } +#addonbar-closebutton:-moz-lwtheme-darktext { + filter: url("chrome://global/skin/icons/invert.svg#invert"); +} + .statuspanel-label { margin: 0; padding: 2px 4px; diff --git a/src/chrome/browser/searchbar.css b/src/chrome/browser/searchbar.css @@ -60,20 +60,19 @@ .search-go-button { padding: 1px; - list-style-image: url("chrome://global/skin/icons/Search-glass.png"); - -moz-image-region: rect(0px 16px 16px 0px); + list-style-image: url("chrome://global/skin/icons/Search-glass.svg"); } .search-go-button:-moz-locale-dir(rtl) { transform: scaleX(-1); } -.search-go-button:hover { - -moz-image-region: rect(0px 32px 16px 16px); +.search-go-button:not(:hover) { + opacity: .7; } .search-go-button:hover:active { - -moz-image-region: rect(0px, 48px, 16px, 32px); + opacity: .8; } .searchbar-engine-menuitem[selected="true"] > .menu-iconic-text { diff --git a/src/chrome/global/findBar.css b/src/chrome/global/findBar.css @@ -4,6 +4,10 @@ @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +.findbar-closebutton:-moz-lwtheme-brighttext { + filter: url("chrome://global/skin/icons/invert.svg#invert"); +} + findbar { padding: 4px 2px; box-shadow: 0 1px 1px rgba(0,0,0,.1) inset; diff --git a/src/chrome/global/global.css b/src/chrome/global/global.css @@ -58,19 +58,19 @@ window.dialog { } .message-icon { - list-style-image: url("chrome://global/skin/icons/information-32.png"); + list-style-image: url("chrome://global/skin/icons/information-16.svg"); } .alert-icon { - list-style-image: url("chrome://global/skin/icons/Warning.png"); + list-style-image: url("chrome://global/skin/icons/warning-16.svg"); } .error-icon { - list-style-image: url("chrome://global/skin/icons/Error.png"); + list-style-image: url("chrome://global/skin/icons/error-16.svg"); } .question-icon { - list-style-image: url("chrome://global/skin/icons/Question.png"); + list-style-image: url("chrome://global/skin/icons/question-16.svg"); } /* ::::: iframe ::::: */ @@ -314,14 +314,13 @@ label[disabled="true"]:-moz-system-metric(windows-classic) { /* :::::: Close button icons ::::: */ .close-icon { - list-style-image: url("chrome://global/skin/icons/close.png"); - -moz-image-region: rect(0, 16px, 16px, 0); + list-style-image: url("chrome://global/skin/icons/close.svg#normal"); } .close-icon:hover { - -moz-image-region: rect(0, 32px, 16px, 16px); + list-style-image: url("chrome://global/skin/icons/close.svg#hover"); } .close-icon:hover:active { - -moz-image-region: rect(0, 48px, 16px, 32px); + list-style-image: url("chrome://global/skin/icons/close.svg#active"); } diff --git a/src/chrome/global/icons/Error.png b/src/chrome/global/icons/Error.png Binary files differ. diff --git a/src/chrome/global/icons/Question.png b/src/chrome/global/icons/Question.png Binary files differ. diff --git a/src/chrome/global/icons/Search-glass.svg b/src/chrome/global/icons/Search-glass.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + x="0" + y="0" + width="16" + height="16" + viewBox="0 0 16 16"> + <circle cx="9" cy="7" r="4.5" stroke-width="1" stroke="#fff" fill="none"/> + <line x1="5.8" y1="10.2" x2="2" y2="14" stroke-width="1" stroke="#fff"/> +</svg> +\ No newline at end of file diff --git a/src/chrome/global/icons/Warning.png b/src/chrome/global/icons/Warning.png Binary files differ. diff --git a/src/chrome/global/icons/blacklist_favicon.png b/src/chrome/global/icons/blacklist_favicon.png Binary files differ. diff --git a/src/chrome/global/icons/blacklist_favicon.svg b/src/chrome/global/icons/blacklist_favicon.svg @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + x="0" + y="0" + width="16" + height="16" + viewBox="0 0 16 16"> + <rect x="0" y="0" width="16" height="16" rx="2" ry="2" stroke-width="0" fill="#b14646"/> + <circle cx="8" cy="8" r="5.5" stroke-width="1" stroke="#fff" fill="none"/> + <line x1="4.1" y1="4.1" x2="11.9" y2="11.9" stroke-width="1" stroke="#fff"/> +</svg> +\ No newline at end of file diff --git a/src/chrome/global/icons/close.svg b/src/chrome/global/icons/close.svg @@ -0,0 +1,40 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + x="0" + y="0" + width="16" + height="16" + viewBox="0 0 16 16" + shape-rendering="geometricPrecision"> + <style> + g:not([id$="-shape"]):not(:target) { + display: none; + } + </style> + <defs> + <g id="x-shape"> + <line x1="5" y1="5" x2="11" y2="11" stroke-width="0.757" stroke="#fff"/> + <line x1="5" y1="11" x2="11" y2="5" stroke-width="0.757" stroke="#fff"/> + </g> + <g id="hover-circle-shape"> + <circle cx="8" cy="8" r="5.62" stroke-width="1" stroke="#fff" fill="none" opacity="0.54"/> + </g> + <g id="active-circle-shape"> + <circle cx="8" cy="8" r="3.52" stroke-width="1" stroke="#fff" fill="none" opacity="0.78125"/> + </g> + </defs> + <g id="normal"> + <use xlink:href="#x-shape"/> + </g> + <g id="hover"> + <use xlink:href="#x-shape"/> + <use xlink:href="#hover-circle-shape"/> + </g> + <g id="active"> + <use xlink:href="#active-circle-shape"/> + </g> + <g id="disabled"> + <use xlink:href="#x-shape" opacity=".375"/> + </g> +</svg> +\ No newline at end of file diff --git a/src/chrome/global/icons/error-16.png b/src/chrome/global/icons/error-16.png Binary files differ. diff --git a/src/chrome/global/icons/error-16.svg b/src/chrome/global/icons/error-16.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + x="0" + y="0" + width="16" + height="16" + viewBox="0 0 16 16"> + <circle cx="7.5" cy="7.5" r="7" stroke-width="1" stroke="#ffffff" fill="none"/> + <line x1="2.6" y1="2.6" x2="12.1" y2="12.1" stroke-width="1" stroke="#ffffff"/> +</svg> +\ No newline at end of file diff --git a/src/chrome/global/icons/error-24.png b/src/chrome/global/icons/error-24.png Binary files differ. diff --git a/src/chrome/global/icons/error-48.png b/src/chrome/global/icons/error-48.png Binary files differ. diff --git a/src/chrome/global/icons/error-64.png b/src/chrome/global/icons/error-64.png Binary files differ. diff --git a/src/chrome/global/icons/information-16.png b/src/chrome/global/icons/information-16.png Binary files differ. diff --git a/src/chrome/global/icons/information-16.svg b/src/chrome/global/icons/information-16.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + x="0" + y="0" + width="16" + height="16" + viewBox="0 0 16 16"> + <circle cx="7.5" cy="7.5" r="7" stroke-width="1" stroke="#ffffff" fill="none"/> + <path d="m 7.5,3 l 0,2.25 m 0,.75 l 0,6" stroke-width="1" stroke="#ffffff" fill="none"/> +</svg> +\ No newline at end of file diff --git a/src/chrome/global/icons/information-24.png b/src/chrome/global/icons/information-24.png Binary files differ. diff --git a/src/chrome/global/icons/information-32.png b/src/chrome/global/icons/information-32.png Binary files differ. diff --git a/src/chrome/global/icons/information-48.png b/src/chrome/global/icons/information-48.png Binary files differ. diff --git a/src/chrome/global/icons/information-64.png b/src/chrome/global/icons/information-64.png Binary files differ. diff --git a/src/chrome/global/icons/invert.svg b/src/chrome/global/icons/invert.svg @@ -0,0 +1,7 @@ +<svg height='0' + xmlns='http://www.w3.org/2000/svg'> + + <filter id='invert'> + <feColorMatrix values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/> + </filter> +</svg> +\ No newline at end of file diff --git a/src/chrome/global/icons/question-16.png b/src/chrome/global/icons/question-16.png Binary files differ. diff --git a/src/chrome/global/icons/question-16.svg b/src/chrome/global/icons/question-16.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + x="0" + y="0" + width="16" + height="16" + viewBox="0 0 16 16"> + <circle cx="7.5" cy="7.5" r="7" stroke-width="1" stroke="#ffffff" fill="none"/> + <path d="m 4.5,6 c 0,-2.3 1,-3.5 3,-3.5 c 1.8,0 3,1 3,2.5 c 0,2 -3,2 -3,4 l 0,1 m 0,1 l 0,1.25" stroke-width="1" stroke="#ffffff" fill="none"/> +</svg> +\ No newline at end of file diff --git a/src/chrome/global/icons/question-24.png b/src/chrome/global/icons/question-24.png Binary files differ. diff --git a/src/chrome/global/icons/question-48.png b/src/chrome/global/icons/question-48.png Binary files differ. diff --git a/src/chrome/global/icons/question-64.png b/src/chrome/global/icons/question-64.png Binary files differ. diff --git a/src/chrome/global/icons/warning-16.png b/src/chrome/global/icons/warning-16.png Binary files differ. diff --git a/src/chrome/global/icons/warning-16.svg b/src/chrome/global/icons/warning-16.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + x="0" + y="0" + width="16" + height="16" + viewBox="0 0 16 16"> + <path d="m 0,13.5 m 2,0 c -1.4,0 -1.7,-0.52 -1,-1.73 l 5.5,-9.53 c .7,-1.21 1.3,-1.21 2,0 l 5.5,9.53 c .7,1.21 0.4,1.73 -1,1.73 l -11,0" stroke-width="1" stroke="#ffffff" fill="none"/> + <path d="m 7.5,4.75 l 0,5.25 m 0,.75 l 0,1.5" stroke-width="1" stroke="#ffffff" fill="none"/> +</svg> +\ No newline at end of file diff --git a/src/chrome/global/icons/warning-24.png b/src/chrome/global/icons/warning-24.png Binary files differ. diff --git a/src/chrome/global/icons/warning-64.png b/src/chrome/global/icons/warning-64.png Binary files differ. diff --git a/src/chrome/global/icons/warning-large.png b/src/chrome/global/icons/warning-large.png Binary files differ. diff --git a/src/chrome/global/notification.css b/src/chrome/global/notification.css @@ -30,15 +30,15 @@ notification[type="critical"] { /* Default icons for notifications */ .messageImage[type="info"] { - list-style-image: url("chrome://global/skin/icons/information-16.png"); + list-style-image: url("chrome://global/skin/icons/information-16.svg"); } .messageImage[type="warning"] { - list-style-image: url("chrome://global/skin/icons/warning-16.png"); + list-style-image: url("chrome://global/skin/icons/warning-16.svg"); } .messageImage[type="critical"] { - list-style-image: url("chrome://global/skin/icons/error-16.png"); + list-style-image: url("chrome://global/skin/icons/error-16.svg"); } .messageCloseButton { diff --git a/src/chrome/global/textbox.css b/src/chrome/global/textbox.css @@ -68,8 +68,7 @@ textbox.plain { /* ::::: search textbox ::::: */ .textbox-search-icon { - list-style-image: url(chrome://global/skin/icons/Search-glass.png); - -moz-image-region: rect(0, 16px, 16px, 0); + list-style-image: url(chrome://global/skin/icons/Search-glass.svg); } .textbox-search-icon:-moz-locale-dir(rtl) { @@ -80,23 +79,32 @@ textbox.plain { cursor: pointer; } +.textbox-search-icon[searchbutton]:not([disabled]):active { + opacity: .8; +} + +.textbox-search-icon[disabled], +.textbox-search-icon:not([searchbutton]), +.textbox-search-icon:not(:hover):not(:active) { + opacity: .7; +} + +/* ::::: Search clear ::::: */ + .textbox-search-clear { - list-style-image: url(chrome://global/skin/icons/Search-close.png); - -moz-image-region: rect(0, 16px, 16px, 0); + list-style-image: url(chrome://global/skin/icons/close.svg#normal); } .textbox-search-clear:not([disabled]) { cursor: default; } -.textbox-search-clear:not([disabled]):hover , -.textbox-search-icon[searchbutton]:not([disabled]):hover { - -moz-image-region: rect(0, 32px, 16px, 16px); +.textbox-search-clear:not([disabled]):hover { + list-style-image: url("chrome://global/skin/icons/close.svg#hover"); } -.textbox-search-clear:not([disabled]):hover:active , -.textbox-search-icon[searchbutton]:not([disabled]):hover:active { - -moz-image-region: rect(0, 48px, 16px, 32px); +.textbox-search-clear:not([disabled]):hover:active { + list-style-image: url("chrome://global/skin/icons/close.svg#active"); } /* ::::: textboxes inside toolbarpaletteitems ::::: */
