Browse Source
convert popup panel icons (https://github.com/uBlockOrigin/uMatrix-issues/issues/68)
pull/2/head
convert popup panel icons (https://github.com/uBlockOrigin/uMatrix-issues/issues/68)
pull/2/head
Raymond Hill
6 years ago
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
10 changed files with 221 additions and 113 deletions
-
28src/css/common.css
-
72src/css/fa-icons.css
-
25src/css/logger-ui.css
-
72src/css/popup.css
-
29src/img/fontawesome/fontawesome-defs.svg
-
46src/js/fa-icons.js
-
2src/js/logger-ui.js
-
8src/js/popup.js
-
28src/logger-ui.html
-
24src/popup.html
@ -0,0 +1,72 @@ |
|||||
|
.fa-icon { |
||||
|
align-items: center; |
||||
|
background-color: transparent; |
||||
|
border: 0; |
||||
|
display: inline-flex; |
||||
|
justify-content: flex-start; |
||||
|
margin: 0; |
||||
|
padding: 0.1em; |
||||
|
position: relative; |
||||
|
} |
||||
|
.fa-icon:hover { |
||||
|
background-color: #eee; |
||||
|
} |
||||
|
.fa-icon > * { |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
.fa-icon.disabled { |
||||
|
color: #888; |
||||
|
fill: #888; |
||||
|
opacity: 0.25; |
||||
|
stroke: #888; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
.fa-icon > .fa-icon-badge, |
||||
|
.fa-icon.disabled > .fa-icon-badge { |
||||
|
display: none; |
||||
|
} |
||||
|
.fa-icon.fa-icon-badged > .fa-icon-badge { |
||||
|
background-color: rgba(255, 255, 255, 0.7); |
||||
|
border-radius: 3px; |
||||
|
bottom: 1px; |
||||
|
display: inline-block; |
||||
|
font-family: sans-serif; |
||||
|
font-size: 40%; |
||||
|
position: absolute; |
||||
|
right: 1px; |
||||
|
} |
||||
|
.fa-icon.disabled > .fa-icon-badge { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.fa-icon > svg { |
||||
|
height: 1em; |
||||
|
} |
||||
|
.fa-icon_puzzle-piece, |
||||
|
.fa-icon_reply-all { |
||||
|
width: calc(1em * 576 / 512); |
||||
|
} |
||||
|
.fa-icon_download, |
||||
|
.fa-icon_eraser, |
||||
|
.fa-icon_filter, |
||||
|
.fa-icon_list-alt, |
||||
|
.fa-icon_power-off, |
||||
|
.fa-icon_reply, |
||||
|
.fa-icon_sync-alt, |
||||
|
.fa-icon_th, |
||||
|
.fa-icon_th-list { |
||||
|
width: calc(1em * 512 / 512); |
||||
|
} |
||||
|
.fa-icon_lock { |
||||
|
width: calc(1em * 448 / 512); |
||||
|
} |
||||
|
.fa-icon_times { |
||||
|
width: calc(1em * 352 / 512); |
||||
|
} |
||||
|
.fa-icon_angle-up, |
||||
|
.fa-icon_angle-double-up { |
||||
|
width: calc(1em * 320 / 512); |
||||
|
} |
||||
|
.fa-icon_ellipsis-v { |
||||
|
width: calc(1em * 192 / 512); |
||||
|
} |
||||
@ -0,0 +1,46 @@ |
|||||
|
/******************************************************************************* |
||||
|
|
||||
|
uMatrix - a browser extension to black/white list requests. |
||||
|
Copyright (C) 2018-present Raymond Hill |
||||
|
|
||||
|
This program is free software: you can redistribute it and/or modify |
||||
|
it under the terms of the GNU General Public License as published by |
||||
|
the Free Software Foundation, either version 3 of the License, or |
||||
|
(at your option) any later version. |
||||
|
|
||||
|
This program is distributed in the hope that it will be useful, |
||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
|
GNU General Public License for more details. |
||||
|
|
||||
|
You should have received a copy of the GNU General Public License |
||||
|
along with this program. If not, see {http://www.gnu.org/licenses/}.
|
||||
|
|
||||
|
Home: https://github.com/gorhill/uMatrix
|
||||
|
*/ |
||||
|
|
||||
|
'use strict'; |
||||
|
|
||||
|
/******************************************************************************/ |
||||
|
|
||||
|
(function() { |
||||
|
let icons = document.querySelectorAll('.fa-icon'); |
||||
|
for ( let icon of icons ) { |
||||
|
if ( icon.childElementCount !== 0 ) { continue; } |
||||
|
let name = icon.textContent; |
||||
|
let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); |
||||
|
svg.classList.add('fa-icon_' + name); |
||||
|
let use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); |
||||
|
let href = '/img/fontawesome/fontawesome-defs.svg#' + name; |
||||
|
use.setAttribute('href', href); |
||||
|
use.setAttribute('xlink:href', href); |
||||
|
svg.appendChild(use); |
||||
|
icon.textContent = ''; |
||||
|
icon.appendChild(svg); |
||||
|
if ( icon.classList.contains('fa-icon-badged') ) { |
||||
|
let badge = document.createElement('span'); |
||||
|
badge.className = 'fa-icon-badge'; |
||||
|
icon.appendChild(badge); |
||||
|
} |
||||
|
} |
||||
|
})(); |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue