MaciejkaG/kalkulator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix settings button color changing

Browse Source
This commit is contained in:
Maciej Gomola 2024-10-18 08:31:29 +02:00
parent e039e58577
commit 1b7bc84b65
4 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/assets/css/style.css
View File

@ -20,6 +20,14 @@ body {
overflow: hidden;
}
.material-symbols-outlined {
font-variation-settings:
'FILL' 1,
'wght' 400,
'GRAD' 0,
'opsz' 24
}
.calculator button {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;

1
static/assets/img/settings.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm112-260q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 479 B

2
static/assets/js/calculator-logic.js
View File

@ -15,7 +15,7 @@ buttons.forEach(button => {
resetCalculator();
} else if (value === 'H') {
toggleHistory();
} else if (value === '') {
} else if (value === 'settings') {
toggleSettings();
} else if (value === '=') {
calculateResult();

4
static/index.html
View File

@ -10,6 +10,8 @@
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=settings" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- anime.js is a library for easy fancy animations with JavaScript -->
@ -45,7 +47,7 @@
<button class="button">2</button>
<button class="button">3</button>
<button class="button operation">+</button>
<button class="button settings"><img src="./assets/img/settings.svg" alt="settings"></button>
<button class="button settings"><span class="material-symbols-outlined">settings</span></button>
<button class="button">0</button>
<button class="button">.</button>
<button class="button operation">=</button>