Skip to content
Snippets Groups Projects
Verified Commit d6173249 authored by Thomas Rientjes's avatar Thomas Rientjes
Browse files

Update and refactor browser action popup

parent b45df1f0
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
pages/popup/icon.png deleted 100644 → 0
+ 0
− 0
View file @ b45df1f0
pages/popup/icon.png

3.74 KiB

pages/popup/icon.svg
+ 5
− 15
View file @ d6173249
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="81.382mm" width="81.382mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 288.36257 288.36256">
<g transform="translate(-252.96 -305.32)">
<g>
<circle cx="397.14" cy="449.51" r="144.18" fill="#69ab90"/>
<circle cx="397.33" cy="449.69" r="96.804" fill="#4a856d"/>
<circle cx="397.14" cy="449.51" r="85.491" fill="#d9ccb5"/>
<path d="m397.84 317.05c-35.857-0.21436-69.613 13.549-95.287 39.223-21.726 21.726-34.785 48.725-38.356 79.299-1.5095 12.924-1.1505 18.559 1.4496 22.765 2.5923 4.1928 7.7157 7.094 12.529 7.094 2.224 0 4.3673-0.59088 6.8602-1.8932 2.6102-1.3636 4.1843-2.796 5.6179-5.1148 1.79-2.8953 2.048-4.0575 2.5639-11.494 1.0787-15.547 3.6425-26.467 9.0225-38.438 5.5317-12.308 11.942-21.608 21.432-31.099 15.367-15.367 34.084-25.098 55.841-29.031 7.7155-1.3947 24.814-1.5398 33.687-0.28464 7.756 1.0971 10.134 0.7672 14.301-1.9925 5.8022-3.8431 8.1425-11.751 5.3024-17.917-3.0315-6.5811-7.1319-8.7184-19.484-10.163-5.1906-0.60718-10.356-0.9226-15.479-0.95322zm109.93 74.51c-8.1977-0.0376-14.914 6.5284-14.914 14.576 0 11.147 10.954 18.298 20.867 13.623 4.0006-1.8866 5.9627-3.8591 7.5023-7.5442 4.0457-9.6829-3.0709-20.608-13.456-20.655zm-14.971 113.33c-4.0751 0.0647-7.3332 2.0205-11.055 6.3482-9.1984 10.697-11.412 13.066-15.958 17.079-13.705 12.096-31.307 20.6-50.351 24.325-9.3447 1.8276-28.844 1.6379-38.299-0.3729-19.891-4.2303-35.81-12.389-51.031-26.152-7.8199-7.071-10.345-8.4952-15.06-8.4952-8.2275 0-14.524 6.3846-14.559 14.764-0.026 6.3329 1.7615 9.0449 11.94 18.107 19.95 17.762 46.738 29.723 73.456 32.798 7.3929 0.8508 22.091 0.86962 29.682 0.0398 24.156-2.6409 47.493-11.922 66.845-26.582 6.4568-4.8917 19.763-18.022 24.347-24.025 5.5848-7.3136 6.7915-11.417 5.1346-17.474-1.1034-4.0332-6.2363-8.7401-10.697-9.8103-1.5875-0.38083-3.0371-0.57098-4.3954-0.54943z" fill-rule="evenodd" fill="#e1eee9"/>
</g>
<g fill="#fff">
<path d="m513.64 468.9c-2.2815-0.10063-3.476 1.6445-4.709 6.2656-0.72585 2.3218-0.8127 3.4136-1.5879 5.7129l-1.1328 3.4004-2.2207-0.7832-2.2207-0.78125 0.48242 3.1484c1.2524 8.1662 2.7305 16.622 2.8926 16.553 1.7355-1.3997 8.0109-6.6523 15.238-12.561 0 0-1.199-0.43109-2.5371-0.91406l-2.3144-0.90039 1.2168-3.7168c0.66905-2.0444 1.5029-5.601 1.8535-7.9043 0.10026-0.65807 0.14896-1.1589 0.19727-1.6621 0.13779-3.332-0.88319-4.7139-3.3906-5.5059-0.6561-0.20727-1.2411-0.32834-1.7676-0.35157z"/>
<path d="m468.09 356.16c-1.5821 1.6469-3.6508 1.2077-7.7315-1.2869-2.1272-1.1799-2.9434-1.9104-5.0908-3.04l-3.166-1.68-1.0672 2.099-1.0686 2.0976-1.8229-2.612c-4.7273-6.7756-9.491-13.916-9.326-13.978 2.222-0.18409 10.389-0.7113 19.697-1.4206 0 0-0.57051 1.1392-1.206 2.4121l-1.0542 2.2486 3.4451 1.8511c1.8947 1.0183 4.9521 3.0176 6.795 4.4431 0.52659 0.4072 0.90738 0.73615 1.2895 1.0671 2.3985 2.3169 2.6128 4.0217 1.3441 6.3249-0.33194 0.60269-0.67188 1.0939-1.037 1.474z"/>
<path d="m-432.68-16.955c-0.92625 0.11186-1.7636 0.61843-2.5957 1.4668-2.5338 2.583-1.7893 5.0501 3.1855 10.545 2.4906 2.751 6.0466 6.7358 7.9004 8.8555 3.7538 4.2926 5.5909 4.8261 8.1582 2.3672 2.8579-2.737 2.1581-5.0574-3.6914-12.246-6.6046-8.1165-10.178-11.324-12.957-10.988z" transform="translate(912.46 377.29)"/>
<path d="m511.69 452.45c-0.1731-2.8106-0.55381-8.1371-0.84577-11.837-0.58317-7.3893 0.33368-9.7981 3.9172-10.296 4.7082-0.65411 6.1374 3.0921 6.5005 17.04 0.24112 9.2648-0.62148 11.529-4.5568 11.95-3.5346 0.37895-4.6643-1.1658-5.0151-6.8574z"/>
</g>
<path fill="#2a4c3d" d="m459.45 442.28c-2.1109-0.0187-4.3622 1.2952-7.7031 4.248-10.175 8.9932-21.922 15.327-34.545 18.627-8.938 2.3365-24.56 2.9354-33.938 1.3027-14.797-2.576-26.79-8.3704-39.924-19.289-4.784-3.9773-6.1342-4.7617-8.1875-4.7617-3.5186 0-6.0234 2.6331-6.0234 6.332 0 2.525 0.38568 3.1373 4.3926 6.9707 2.416 2.3114 6.445 5.638 8.9551 7.3945 2.51 1.7566 4.8076 3.4001 5.1055 3.6523 0.2983 0.25226 0.17832 1.9504-0.26758 3.7715-1.4733 6.0171-4.278 10.442-7.6934 12.551-1.1265 0.76846-2.2641 1.2685-3.3203 1.3828-6.5363 0.70717-9.3955 4.3121-7.293 9.1953 1.6698 3.8781 6.6162 4.7935 12.031 2.9883 0.24651-0.0848 0.49286-0.16918 0.73829-0.26368 0.23829-0.0897 0.47741-0.18505 0.71679-0.28515 0.49332-0.20988 0.98411-0.43326 1.4707-0.68164 0.0508-0.0257 0.10153-0.0481 0.15234-0.0742 1.8138-0.94212 3.5716-2.1505 5.2266-3.5957 0.14038-0.12553 0.28085-0.25756 0.42188-0.39063 0.20456-0.18578 0.40438-0.38109 0.60547-0.57422 1.7137-1.7335 3.4328-3.9476 4.8926-6.2402 0.20605-0.3236 0.39292-0.64933 0.58789-0.97461 0.10747-0.18366 0.22362-0.36247 0.32813-0.54688 1.5252-2.6914 2.7177-5.4344 3.1113-7.4023 0.2326-1.1632 0.67161-2.1152 0.97461-2.1152 0.3031-0.00001 2.6227 0.7471 5.1543 1.6602 6.1439 2.2158 14.829 4.2505 20.553 4.8144l4.668 0.45899v11.014c0 10.802 0.033 11.054 1.7129 13.051 0.9421 1.1196 2.3872 2.1375 3.2109 2.2617 2.6996 0.407 4.527-0.26757 6.2363-2.2988 1.6414-1.9513 1.6836-2.265 1.6836-13.004v-11.004l4.8105-0.44727c6.0027-0.55789 16.571-3.1406 22.189-5.4238 2.3449-0.9528 4.4893-1.5925 4.7656-1.4219 0.2761 0.17065 0.68736 1.457 0.91406 2.8594 0.7511 4.6454 4.9402 12.24 8.8633 16.07 7.2261 7.0551 16.814 8.4874 19.682 2.9414 2.429-4.6972-0.15457-8.474-6.5898-9.6348-2.868-0.51734-6.1671-3.8642-8.0273-8.1445-1.5696-3.6119-2.9464-10.521-2.2266-11.172 0.3135-0.28323 2.5308-1.9235 4.9277-3.6445 6.261-4.4955 12.034-10.285 12.537-12.574 0.49754-2.2654-1.0289-5.7049-3-6.7598-0.99058-0.53012-1.9214-0.81378-2.8809-0.82227z"/>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="7.1673mm" width="7.2061mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 25.5334 25.395792">
<g transform="translate(177.77 -519.66)">
<path d="m-165 519.66c-2.6196 0-4.9735 0.71508-7.2323 2.1971-0.9279 0.60864-2.7283 2.4092-3.337 3.337-1.4712 2.2424-2.1972 4.6154-2.1972 7.1819 0 2.5788 0.7141 4.9223 2.1797 7.1552 0.6309 0.96123 2.4192 2.7501 3.3802 3.3808 1.4791 0.97083 3.2841 1.71 4.9268 2.0176 1.0838 0.20297 3.9457 0.15209 5.0159-0.0894 2.4596-0.55481 4.4742-1.6723 6.29-3.4887 2.4847-2.4856 3.7408-5.4989 3.7408-8.9756 0-3.4682-1.2629-6.498-3.7405-8.9756-2.4919-2.4919-5.5045-3.7404-9.0264-3.7404z" fill="#7db69f"/>
<path d="m-165.02 528.24c-0.8699 0-1.6514 0.23746-2.4016 0.72959-0.3081 0.20212-0.9061 0.80004-1.1081 1.1081-0.4886 0.74466-0.7298 1.5326-0.7298 2.3849 0 0.85636 0.2371 1.6346 0.724 2.3761 0.2094 0.3192 0.8033 0.91326 1.1224 1.1227 0.4911 0.32239 1.0906 0.56785 1.6361 0.67001 0.3598 0.0673 1.3102 0.0504 1.6658-0.0297 0.8167-0.18424 1.4856-0.55532 2.0886-1.1585 0.8251-0.8254 1.2423-1.826 1.2423-2.9806 0-1.1517-0.4195-2.1578-1.2421-2.9806-0.8277-0.82751-1.8279-1.2421-2.9976-1.2421z" fill="#4a826c"/>
<path d="m-2404.4 671.18c-3.2399-0.0194-6.3107 1.2365-8.6289 3.5547 0 0.002 0 0.004-0.01 0.006-1.9541 1.9569-3.1473 4.4242-3.4687 7.1758-0.1336 1.143-0.1324 1.8177 0.2265 2.3984 0.3941 0.63745 0.9181 0.94336 1.6758 0.94336 0.2981 0 0.6535-0.10695 0.916-0.24414 0.2434-0.12713 0.6126-0.46272 0.7539-0.69141 0.065-0.10555 0.202-0.39493 0.2403-0.56641 0.053-0.23546 0.061-0.41065 0.084-0.74218 0.088-1.2626 0.2865-2.0912 0.7089-3.0312 0.4385-0.97557 0.9254-1.6871 1.6778-2.4395 1.2078-1.2078 2.6659-1.965 4.3828-2.2754 0.3293-0.0595 0.7416-0.0624 1.2617-0.0684s1.0247-0.004 1.3828 0.0469c0.3661 0.0518 0.6053 0.0832 0.9219 0.0391 0.2645-0.0368 0.6003-0.19398 0.791-0.32031 0.8224-0.54467 1.1248-1.5151 0.707-2.4219a0.6513 0.6513 0 0 1 0 -0.002c-0.1439-0.31257-0.5075-0.75154-0.8496-0.92969-0.4136-0.21541-0.8031-0.27857-1.3769-0.3457-0.4667-0.0546-0.9332-0.0832-1.3985-0.0859zm9.3692 6.3516c-1.074-0.004-1.9883 0.87522-1.9883 1.957 0 1.3647 1.5564 2.3925 2.7988 1.8066 0.3338-0.1574 0.8593-0.69555 0.9922-1.0137 0.5288-1.2658-0.423-2.7422-1.8008-2.75zm-1.291 9.6602c-0.5015 0.009-1.1313 0.39448-1.4707 0.78906-0.7801 0.90716-0.9293 1.0694-1.2911 1.3887-1.0664 0.94113-2.4514 1.6118-3.957 1.9062-0.394 0.0771-0.8958 0.072-1.4824 0.0664-0.5866-0.006-1.0998-0.0118-1.4941-0.0957l0.1328 0.0137a0.6513 0.6513 0 0 1 -0.1328 -0.0137c-1.5797-0.33594-2.8091-0.96601-4.0195-2.0606-0.3529-0.31903-0.5674-0.50965-0.8692-0.67969-0.2288-0.12895-0.689-0.22851-0.8945-0.22851-1.03 0-1.951 0.94359-1.9551 1.9688v0.002a0.6513 0.6513 0 0 1 0 0.002c0 0.26313 0.1216 0.80286 0.3028 1.0781 0.2346 0.35637 0.5009 0.59192 0.957 0.99805 1.8218 1.622 4.2177 2.6942 6.6543 2.9746 0.7641 0.0879 1.9155 0.0871 2.6895 0.002 2.1894-0.23969 4.2945-1.0791 6.0489-2.4082 0.7055-0.53445 1.6855-1.491 2.2129-2.1816 0.2682-0.35126 0.4557-0.64063 0.5664-1.0176 0.098-0.33319 0.076-0.788-0.01-1.0938-0.1165-0.42605-0.279-0.59899-0.5546-0.85157-0.2646-0.24237-0.4858-0.39738-0.8809-0.49218-0.1798-0.0432-0.3602-0.0694-0.5527-0.0664z" fill-rule="evenodd" transform="matrix(.82404 0 0 .82404 1816.1 -30.489)" fill="#f1f7f5"/>
</g>
</svg>
pages/popup/icon32.png deleted 100644 → 0
+ 0
− 0
View file @ b45df1f0
pages/popup/icon32.png

1.63 KiB

pages/popup/icon36.png deleted 100644 → 0
+ 0
− 0
View file @ b45df1f0
pages/popup/icon36.png

1.78 KiB

pages/popup/popup.css
+ 96
− 151
View file @ d6173249
/**
* Sections
*/
body {
background-color: #f0f0f0;
color: #555;
......@@ -10,29 +14,47 @@ body {
width: 350px;
}
h1 {
font-size: 36px;
margin: 0;
text-align: center;
}
.title {
font-weight: bold;
margin-bottom: 2px;
text-align: center;
header {
align-items: center;
border-bottom: solid lightgray 1px;
display: flex;
padding: 4px 0;
position: relative;
}
.description {
color: #777;
font-style: italic;
margin-bottom: 18px;
text-align: center;
.button-panel {
overflow: hidden;
padding: 6px;
text-align: right;
}
.popup-content {
padding: 0;
}
/**
* Hyperlinks
*/
.text-link {
color: #bdbdbd;
cursor: pointer;
float: left;
font-size: 13px;
padding-left: 4px;
padding-top: 5px;
text-decoration: none;
}
.text-link:hover {
color: #777;
text-decoration: underline;
}
/**
* Lists
*/
.list {
border-bottom: 1px solid #d8d8d8;
margin: 0;
......@@ -76,167 +98,90 @@ h1 {
border-bottom: none;
}
.side-note {
color: #a5a5a5;
font-style: italic;
font-weight: normal;
}
.badge {
background-color: #6bb798;
border-radius: 10px;
color: #fff;
font-family: monospace;
font-size: 13px;
font-weight: bold;
margin-right: 8px;
padding: 3px 15px;
}
.button-panel {
padding: 6px;
text-align: right;
}
/**
* Buttons
*/
.btn-sm {
font-size: 12px !important;
}
.text-link {
color: #bdbdbd;
background-color: #f5f5f5;
border-radius: 2px;
border: 1px solid #cfcfcf;
cursor: pointer;
float: left;
font-size: 13px;
padding-left: 4px;
padding-top: 2px;
text-decoration: none;
}
.text-link:hover {
color: #777;
text-decoration: underline;
}
#injection-counter {
padding-top: 14px;
float: right;
font-size: 12px;
padding: 5px 22px;
}
#extension-options-overlay-header {
align-items: center;
border-bottom: solid lightgray 1px;
display: flex;
padding: 4px 0;
position: relative;
.btn-sm:hover {
background-color: #fff;
}
#extension-options-overlay-icon {
padding: 8px;
}
/**
* Titles
*/
#extension-options-overlay-icon {
height: 32px;
width: 32px;
h1 {
font-size: 36px;
margin: 0;
padding-top: 14px;
text-align: center;
}
#extension-options-overlay-title {
.extension-title {
font-size: 14px;
font-weight: bold;
padding-left: 0;
}
:enabled:hover:-webkit-any(
select,
input[type='checkbox'],
input[type='radio'],
:-webkit-any(
button,
input[type='button'],
input[type='submit']):not(.custom-appearance)) {
background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
border-color: rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
inset 0 1px 2px rgba(255, 255, 255, 0.95);
color: black;
}
:enabled:active:-webkit-any(
select,
input[type='checkbox'],
input[type='radio'],
:-webkit-any(
button,
input[type='button'],
input[type='submit']):not(.custom-appearance)) {
background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
box-shadow: none;
text-shadow: none;
}
:enabled:focus:-webkit-any(
select,
input[type='checkbox'],
input[type='number'],
input[type='password'],
input[type='radio'],
input[type='search'],
input[type='text'],
input[type='url'],
input:not([type]),
:-webkit-any(
button,
input[type='button'],
input[type='submit']):not(.custom-appearance)) {
/* OVERRIDE */
-webkit-transition: border-color 200ms;
/* We use border color because it follows the border radius (unlike outline).
* This is particularly noticeable on mac. */
border-color: rgb(77, 144, 254);
outline: none;
}
:-webkit-any(button,
input[type='button'],
input[type='submit']):not(.custom-appearance),
select,
input[type='checkbox'],
input[type='radio'] {
-webkit-appearance: none;
-webkit-user-select: none;
background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
border: 1px solid rgba(0, 0, 0, 0.25);
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
inset 0 1px 2px rgba(255, 255, 255, 0.75);
color: #444;
font: inherit;
margin: 0 1px 0 0;
outline: none;
text-shadow: 0 1px 0 rgb(240, 240, 240);
.description {
color: #777;
font-style: italic;
margin: 0 6px 18px;
text-align: center;
}
:-webkit-any(button,
input[type='button'],
input[type='submit']):not(.custom-appearance),
select {
min-height: 2em;
min-width: 4em;
padding-top: 1px;
padding-bottom: 1px;
.title {
font-weight: bold;
margin-bottom: 2px;
text-align: center;
}
:-webkit-any(button,
input[type='button'],
input[type='submit']):not(.custom-appearance) {
-webkit-padding-end: 10px;
-webkit-padding-start: 10px;
}
/**
* Icons
*/
.btn-icon {
color: #5f5f5f;
}
.extension-icon {
height: 26px;
padding: 10px 6px 10px 8px;
width: 26px;
}
/**
* Miscellaneous
*/
.badge {
background-color: #6bb798;
border-radius: 10px;
color: #fff;
font-family: monospace;
font-size: 13px;
font-weight: bold;
margin-right: 8px;
padding: 3px 15px;
}
.label-beta {
color: #6aac91;
font-size: 9px;
}
.side-note {
color: #a5a5a5;
font-style: italic;
font-weight: normal;
}
pages/popup/popup.html
+ 6
− 7
View file @ d6173249
......@@ -20,11 +20,10 @@
<script src="popup.js"></script>
<div id="extension-options-overlay-header">
<img id="extension-options-overlay-icon" src="icon.png" alt="Extension Icon">
<div id="extension-options-overlay-title">Decentraleyes <sup class="label-beta">BETA</sup></div>
<div style="float: right;"></div>
</div>
<header>
<img class="extension-icon" src="icon.svg" alt="Extension Icon">
<div class="extension-title">Decentraleyes <sup class="label-beta">BETA</sup></div>
</header>
<section id="popup-content" class="popup-content">
......@@ -39,9 +38,9 @@
<span id="testing-utility-link" class="text-link">decentraleyes.org/test</span>
<button id="options-button" class="btn-sm" title="Options">
<div id="options-button" class="btn-sm" title="Options">
<i class="btn-icon fas fa-cog" data-fa-transform="grow-2"></i>
</button>
</div>
</section>
</body>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment