kawa/startpage-onedark
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Resize the cog icon and change it's look

Browse Source 
The cog icon looked too large before and the way it looked wasn't too
good. Updated the icons SVG and changed its size.
This commit is contained in:
Deepjyoti Barman
2020-09-17 11:12:47 +05:30
parent 8011f7c029
commit a401ff0b46
3 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
css/main.css
View File

@@ -154,10 +154,13 @@ body {
cursor: pointer; } cursor: pointer; }
#settings-cog { #settings-cog {
width: 48px; width: 23px;
height: 48px; height: 23px;
position: absolute; position: absolute;
bottom: 25px; bottom: 25px;
right: 25px; } right: 25px;
#settings-cog .cog:hover { transition: 2s ease-in; }
fill: white; } #settings-cog:hover .cog {
fill: white;
stroke: white;
transition: 2s ease-in; }

6
index.html
View File

@@ -35,8 +35,10 @@
</div> </div>
<div id="other-content"> <div id="other-content">
</div> </div>
<svg viewBox="0 0 24 24" id="settings-cog"> <svg id="settings-cog" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings" viewBox="0 0 24 24" stroke-width="1.5" stroke="#607D8B" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path class="cog" fill="#6F6F6F" ng-attr-d="{{icon.data}}" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path> <path stroke="none" d="M0 0h24v24H0z"/>
<path class="cog" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<circle cx="12" cy="12" r="3" />
</svg> </svg>
</div> </div>
<!--JSON Editor--> <!--JSON Editor-->

13
scss/main.scss
View File

@@ -254,13 +254,16 @@ body {
} }
#settings-cog { #settings-cog {
width: 48px; width: 23px;
height: 48px; height: 23px;
position: absolute; position: absolute;
bottom: 25px; bottom: 25px;
right: 25px; right: 25px;
transition: 2s ease-in;
.cog:hover {
&:hover .cog {
fill: white; fill: white;
stroke: white;
transition: 2s ease-in;
} }
} }