Replace setting icon with svg
This commit is contained in:
sienori
parent
8f5001fa48
commit
50e7fa5933
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
|
|
@ -22,6 +22,14 @@ body {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background-color: var(--line);
|
background-color: var(--line);
|
||||||
|
|
@ -41,15 +49,33 @@ body {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#header .rightButtons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
#setting {
|
#setting {
|
||||||
height: 17px;
|
display: flex;
|
||||||
width: 17px;
|
align-items: center;
|
||||||
background-image: url("/icons/setting.png");
|
|
||||||
background-size: 17px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#setting svg {
|
||||||
|
flex-shrink: 0;
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
fill: var(--sub-text);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
transition: fill 100ms, transform 300ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#setting:hover svg {
|
||||||
|
fill: var(--highlight);
|
||||||
|
transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,12 +8,42 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<svg class=hidden>
|
||||||
|
<defs>
|
||||||
|
<symbol id="settingSvg" viewBox="0 0 512 512">
|
||||||
|
<path class="st0" d="M499.453,210.004l-55.851-2.58c-5.102-0.23-9.608-3.395-11.546-8.103l-11.508-27.695
|
||||||
|
c-1.937-4.728-0.997-10.145,2.455-13.914l37.668-41.332c4.718-5.188,4.546-13.205-0.421-18.182l-46.434-46.443
|
||||||
|
c-4.986-4.967-13.003-5.159-18.2-0.412l-41.312,37.668c-3.778,3.443-9.206,4.402-13.924,2.436l-27.694-11.488
|
||||||
|
c-4.718-1.946-7.864-6.454-8.094-11.565l-2.589-55.831C301.675,5.534,295.883,0,288.864,0h-65.708
|
||||||
|
c-7.02,0-12.831,5.534-13.156,12.562l-2.571,55.831c-0.23,5.111-3.376,9.618-8.094,11.565L171.64,91.447
|
||||||
|
c-4.737,1.966-10.165,1.007-13.924-2.436l-41.331-37.668c-5.198-4.746-13.215-4.564-18.201,0.412L51.769,98.198
|
||||||
|
c-4.986,4.977-5.158,12.994-0.422,18.182l37.668,41.332c3.452,3.769,4.373,9.186,2.416,13.914l-11.469,27.695
|
||||||
|
c-1.956,4.708-6.444,7.873-11.564,8.103l-55.832,2.58c-7.019,0.316-12.562,6.118-12.562,13.147v65.699
|
||||||
|
c0,7.019,5.543,12.83,12.562,13.148l55.832,2.579c5.12,0.229,9.608,3.394,11.564,8.103l11.469,27.694
|
||||||
|
c1.957,4.728,1.036,10.146-2.416,13.914l-37.668,41.313c-4.756,5.217-4.564,13.224,0.403,18.201l46.471,46.443
|
||||||
|
c4.967,4.977,12.965,5.15,18.182,0.422l41.312-37.677c3.759-3.443,9.207-4.392,13.924-2.435l27.694,11.478
|
||||||
|
c4.719,1.956,7.864,6.464,8.094,11.575l2.571,55.831c0.325,7.02,6.136,12.562,13.156,12.562h65.708
|
||||||
|
c7.02,0,12.812-5.542,13.138-12.562l2.589-55.831c0.23-5.111,3.376-9.619,8.094-11.575l27.694-11.478
|
||||||
|
c4.718-1.957,10.146-1.008,13.924,2.435l41.312,37.677c5.198,4.728,13.215,4.555,18.2-0.422l46.434-46.443
|
||||||
|
c4.967-4.977,5.139-12.984,0.421-18.201l-37.668-41.313c-3.452-3.768-4.412-9.186-2.455-13.914l11.508-27.694
|
||||||
|
c1.937-4.709,6.444-7.874,11.546-8.103l55.851-2.579c7.019-0.318,12.542-6.129,12.542-13.148v-65.699
|
||||||
|
C511.995,216.122,506.472,210.32,499.453,210.004z M256.01,339.618c-46.164,0-83.622-37.438-83.622-83.612
|
||||||
|
c0-46.184,37.458-83.622,83.622-83.622s83.602,37.438,83.602,83.622C339.612,302.179,302.174,339.618,256.01,339.618z"></path>
|
||||||
|
</symbol>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
<div id=header>
|
<div id=header>
|
||||||
<div id=title>Simple Translate</div>
|
<div id=title>Simple Translate</div>
|
||||||
|
<div class="rightButtons">
|
||||||
<a href="../options/options.html" target="_blank">
|
<a href="../options/options.html" target="_blank">
|
||||||
<div id=setting></div>
|
<div id="setting" title="Setting">
|
||||||
|
<svg>
|
||||||
|
<use xlink:href="#settingSvg"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div id=main>
|
<div id=main>
|
||||||
<textarea id=textarea spellcheck=false contenteditable=true autofocus></textarea>
|
<textarea id=textarea spellcheck=false contenteditable=true autofocus></textarea>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
|
||||||
|
|
@ -48,6 +48,11 @@ function setLangList() {
|
||||||
langList.innerHTML = langListHtml;
|
langList.innerHTML = langListHtml;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setTitles();
|
||||||
|
function setTitles(){
|
||||||
|
document.getElementById("setting").title = browser.i18n.getMessage('settingsLabel');
|
||||||
|
}
|
||||||
|
|
||||||
function alphabeticallySort(a, b) {
|
function alphabeticallySort(a, b) {
|
||||||
if (a[1].toString() > b[1].toString()) {
|
if (a[1].toString() > b[1].toString()) {
|
||||||
return 1;
|
return 1;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue