CODEWITHSUNDEEP
htmlcss
Adrian
Adrian

Reputation: 71

Cannot center text inside buttons

I'm making a calculator app and having a bit weird styling problem. Can someone explain me why the digits inside buttons are not centered vertically? If you look closer it looks like they are a little bit above center position. I think its because of font-family placed in "*" selector. But why is that not centered even if the font is different? Even vertical-align: middle does not help.

buttons

let input1 = document.getElementById("input1");
let input2 = document.getElementById("input2");
let input3 = document.getElementById("input3");
let main = document.getElementById("main");

input1.checked = true;

function setColorTheme() {
  if (input1.checked == true) {
    main.classList.add("dark");
  } else {
    main.classList.remove("dark");
  }
  if (input2.checked == true) {
    main.classList.add("light");
  } else {
    main.classList.remove("light");
  }
  if (input3.checked == true) {
    main.classList.add("saturated");
  } else {
    main.classList.remove("saturated");
  }
}

setColorTheme();

document.querySelectorAll('input[name="theme"]').forEach((e) => {
  e.addEventListener("change", setColorTheme);
});
.dark {
  --mainBackground: hsl(222, 26%, 31%);
  --keypad_toggle_Background: hsl(223, 31%, 20%);
  --screenBackground: hsl(224, 36%, 15%);
  --removeKeyBackground: hsl(225, 21%, 49%);
  --removeKeyShadow: hsl(224, 28%, 35%);
  --equal_toggle_KeyBackground: hsl(6, 63%, 50%);
  --equalKeyShadow: hsl(6, 70%, 34%);
  --normalKeyBackground: hsl(30, 25%, 89%);
  --normalKeyShadow: hsl(28, 16%, 65%);
  --normalKeyText: hsl(221, 14%, 31%);
  --default: hsl(0, 0%, 100%);
  --equalColorText: hsl(0, 0%, 100%);
  --delResetColorText: hsl(0, 0%, 100%);
}

.light {
  --mainBackground: hsl(0, 0%, 90%);
  --keypad_toggle_Background: hsl(0, 5%, 81%);
  --screenBackground: hsl(0, 0%, 93%);
  --removeKeyBackground: hsl(185, 42%, 37%);
  --removeKeyShadow: hsl(185, 58%, 25%);
  --equal_toggle_KeyBackground: hsl(25, 98%, 40%);
  --equalKeyShadow: hsl(25, 99%, 27%);
  --normalKeyBackground: hsl(45, 7%, 89%);
  --normalKeyShadow: hsl(28, 16%, 65%);
  --normalKeyText: hsl(60, 10%, 19%);
  --default: hsl(0, 0%, 0%);
  --equalColorText: hsl(0, 0%, 100%);
  --delResetColorText: hsl(0, 0%, 100%);
}

.saturated {
  --mainBackground: hsl(268, 75%, 9%);
  --keypad_toggle_Background: hsl(268, 71%, 12%);
  --screenBackground: hsl(268, 71%, 12%);
  --removeKeyBackground: hsl(281, 89%, 26%);
  --removeKeyShadow: hsl(285, 91%, 52%);
  --equal_toggle_KeyBackground: hsl(176, 100%, 44%);
  --equalKeyShadow: hsl(177, 92%, 70%);
  --normalKeyBackground: hsl(268, 47%, 21%);
  --normalKeyShadow: hsl(290, 70%, 36%);
  --normalKeyText: hsl(52, 100%, 62%);
  --default: hsl(52, 100%, 62%);
  --equalColorText: hsl(198, 20%, 13%);
  --delResetColorText: hsl(0, 0%, 100%);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Spartan", sans-serif;
}

main {
  background: var(--mainBackground);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default);
}

.calc-container {
  min-height: 55vh;
  width: 28%;
}
.calc-container header {
  display: flex;
  min-height: 10vh;
  width: 90%;
  margin: auto;
  align-items: center;
  justify-content: space-between;
}
.calc-container header .theme-toggler {
  display: flex;
  margin-bottom: 0.8rem;
}
.calc-container header .theme-toggler h2 {
  font-size: 12px;
  align-self: flex-end;
  margin-right: 1rem;
}
.calc-container header .theme-toggler .label-container {
  display: flex;
  justify-content: space-evenly;
  text-align: center;
}
.calc-container header .theme-toggler .label-container .label {
  margin: 0rem 0.35rem;
}
.calc-container header .theme-toggler .input-container {
  width: 60px;
  height: 20px;
  border-radius: 10px;
  background: var(--keypad_toggle_Background);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.calc-container header .theme-toggler .input-container .input {
  appearance: none;
  background: var(--equal_toggle_KeyBackground);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  opacity: 0;
  cursor: pointer;
}
.calc-container header .theme-toggler .input-container .input:checked {
  opacity: 1;
}
.calc-container .screen {
  min-height: 10vh;
  width: 90%;
  background: var(--screenBackground);
  margin: auto;
  border-radius: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
  word-wrap: break-word;
  word-break: break-all;
}
.calc-container .screen-one,
.calc-container .screen-two {
  margin: 0.2rem 1.8rem;
  width: auto;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calc-container .screen-one {
  font-size: 15px;
  opacity: 0.5;
}
.calc-container .screen-two {
  font-size: 1.4rem;
}
.calc-container .button-container {
  min-height: 40vh;
  width: 90%;
  background: var(--keypad_toggle_Background);
  border-radius: 10px;
  margin: 1rem auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 1.5rem;
  grid-gap: 1rem;
  text-align: center;
}
.calc-container .button-container .button,
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete,
.calc-container .button-container .operation {
  border-radius: 10px;
  outline: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  background: var(--normalKeyBackground);
  box-shadow: 0 5px var(--normalKeyShadow);
}
.calc-container .button-container .reset,
.calc-container .button-container .delete {
  background: var(--removeKeyBackground);
  color: var(--delResetColorText) !important;
  box-shadow: 0 5px var(--removeKeyShadow);
}
.calc-container .button-container .reset:hover,
.calc-container .button-container .delete:hover {
  transform: translateY(5px);
  box-shadow: none;
}
.calc-container .button-container .equal {
  background: var(--equal_toggle_KeyBackground);
  box-shadow: 0 5px var(--equalKeyShadow);
  color: var(--equalColorText) !important;
}
.calc-container .button-container .equal:hover {
  transform: translateY(5px);
  box-shadow: none;
}
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete {
  color: var(--default);
}
.calc-container .button-container .button,
.calc-container .button-container .operation {
  color: var(--normalKeyText);
}
.calc-container .button-container .button:hover,
.calc-container .button-container .operation:hover {
  transform: translateY(5px);
  box-shadow: none;
}
.calc-container .button-container .reset {
  grid-column: 1/3;
}
.calc-container .button-container .equal {
  grid-column: 3/5;
}

p {
  position: absolute;
  left: 50%;
  bottom: 1%;
  color: white;
  font-size: 12px;
  transform: translate(-50%, 0);
}
p span {
  text-decoration: underline;
}

@media screen and (max-width: 1100px) {
  .calc-container {
    transform: translate(-50%, 0);
  }

  .button-container {
    width: 300px !important;
  }

  .screen {
    width: 300px !important;
  }

  header {
    width: 300px !important;
  }

  p {
    text-align: center;
    width: 80%;
  }
}
@media screen and (max-width: 375px) {
  .calc-container {
    transform: translate(-90%, -15%) !important;
  }

  input {
    -webkit-appearance: none;
    background: var(--equal_toggle_KeyBackground);
  }

  p {
    text-align: center;
    width: 60%;
  }

  header {
    width: 300px !important;
  }
}

/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Spartan:wght@700&display=swap"
      rel="stylesheet"
    />

    <script src="./script.js" defer></script>
    <title>Frontend Mentor | Calculator app</title>
  </head>
  <body>
    <main id="main">
      <div class="calc-container">
        <header>
          <h1>calc</h1>

          <div class="theme-toggler">
            <h2>THEME</h2>

            <div>
              <div class="label-container">
                <label for="input1" class="label">1</label>
                <label for="input2" class="label">2</label>
                <label for="input3" class="label">3</label>
              </div>
              <div class="input-container">
                <input id="input1" class="input" type="radio" name="theme" />
                <input id="input2" class="input" type="radio" name="theme" />
                <input id="input3" class="input" type="radio" name="theme" />
              </div>
            </div>
          </div>
        </header>

        <div class="screen">
          <div class="screen-one"></div>
          <div class="screen-two"></div>
        </div>
        <div class="button-container">
          <button class="button">7</button>
          <button class="button">8</button>
          <button class="button">9</button>
          <button class="delete">DEL</button>
          <button class="button">4</button>
          <button class="button">5</button>
          <button class="button">6</button>
          <button class="operation">+</button>
          <button class="button">1</button>
          <button class="button">2</button>
          <button class="button">3</button>
          <button class="operation">-</button>
          <button class="button">.</button>
          <button class="button">0</button>
          <button class="operation">/</button>
          <button class="operation">x</button>
          <button class="reset">RESET</button>
          <button class="equal">=</button>
        </div>
      </div>
    </main>

    <p>
      Challenge by <span>Frontend Mentor</span>. Coded by
      <span>Adrian397</span>.
    </p>
  </body>
</html>

Upvotes: 0

Views: 49

Answers (2)

NcXNaV
NcXNaV

Reputation: 1761

A simple solution is to use padding-top: Check this out.

let input1 = document.getElementById("input1");
let input2 = document.getElementById("input2");
let input3 = document.getElementById("input3");
let main = document.getElementById("main");

input1.checked = true;

function setColorTheme() {
  if (input1.checked == true) {
    main.classList.add("dark");
  } else {
    main.classList.remove("dark");
  }
  if (input2.checked == true) {
    main.classList.add("light");
  } else {
    main.classList.remove("light");
  }
  if (input3.checked == true) {
    main.classList.add("saturated");
  } else {
    main.classList.remove("saturated");
  }
}

setColorTheme();

document.querySelectorAll('input[name="theme"]').forEach((e) => {
  e.addEventListener("change", setColorTheme);
});
.dark {
  --mainBackground: hsl(222, 26%, 31%);
  --keypad_toggle_Background: hsl(223, 31%, 20%);
  --screenBackground: hsl(224, 36%, 15%);
  --removeKeyBackground: hsl(225, 21%, 49%);
  --removeKeyShadow: hsl(224, 28%, 35%);
  --equal_toggle_KeyBackground: hsl(6, 63%, 50%);
  --equalKeyShadow: hsl(6, 70%, 34%);
  --normalKeyBackground: hsl(30, 25%, 89%);
  --normalKeyShadow: hsl(28, 16%, 65%);
  --normalKeyText: hsl(221, 14%, 31%);
  --default: hsl(0, 0%, 100%);
  --equalColorText: hsl(0, 0%, 100%);
  --delResetColorText: hsl(0, 0%, 100%);
}

.light {
  --mainBackground: hsl(0, 0%, 90%);
  --keypad_toggle_Background: hsl(0, 5%, 81%);
  --screenBackground: hsl(0, 0%, 93%);
  --removeKeyBackground: hsl(185, 42%, 37%);
  --removeKeyShadow: hsl(185, 58%, 25%);
  --equal_toggle_KeyBackground: hsl(25, 98%, 40%);
  --equalKeyShadow: hsl(25, 99%, 27%);
  --normalKeyBackground: hsl(45, 7%, 89%);
  --normalKeyShadow: hsl(28, 16%, 65%);
  --normalKeyText: hsl(60, 10%, 19%);
  --default: hsl(0, 0%, 0%);
  --equalColorText: hsl(0, 0%, 100%);
  --delResetColorText: hsl(0, 0%, 100%);
}

.saturated {
  --mainBackground: hsl(268, 75%, 9%);
  --keypad_toggle_Background: hsl(268, 71%, 12%);
  --screenBackground: hsl(268, 71%, 12%);
  --removeKeyBackground: hsl(281, 89%, 26%);
  --removeKeyShadow: hsl(285, 91%, 52%);
  --equal_toggle_KeyBackground: hsl(176, 100%, 44%);
  --equalKeyShadow: hsl(177, 92%, 70%);
  --normalKeyBackground: hsl(268, 47%, 21%);
  --normalKeyShadow: hsl(290, 70%, 36%);
  --normalKeyText: hsl(52, 100%, 62%);
  --default: hsl(52, 100%, 62%);
  --equalColorText: hsl(198, 20%, 13%);
  --delResetColorText: hsl(0, 0%, 100%);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Spartan", sans-serif;
}

main {
  background: var(--mainBackground);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default);
}

.calc-container {
  min-height: 55vh;
  width: 28%;
}
.calc-container header {
  display: flex;
  min-height: 10vh;
  width: 90%;
  margin: auto;
  align-items: center;
  justify-content: space-between;
}
.calc-container header .theme-toggler {
  display: flex;
  margin-bottom: 0.8rem;
}
.calc-container header .theme-toggler h2 {
  font-size: 12px;
  align-self: flex-end;
  margin-right: 1rem;
}
.calc-container header .theme-toggler .label-container {
  display: flex;
  justify-content: space-evenly;
  text-align: center;
}
.calc-container header .theme-toggler .label-container .label {
  margin: 0rem 0.35rem;
}
.calc-container header .theme-toggler .input-container {
  width: 60px;
  height: 20px;
  border-radius: 10px;
  background: var(--keypad_toggle_Background);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.calc-container header .theme-toggler .input-container .input {
  appearance: none;
  background: var(--equal_toggle_KeyBackground);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  opacity: 0;
  cursor: pointer;
}
.calc-container header .theme-toggler .input-container .input:checked {
  opacity: 1;
}
.calc-container .screen {
  min-height: 10vh;
  width: 90%;
  background: var(--screenBackground);
  margin: auto;
  border-radius: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
  word-wrap: break-word;
  word-break: break-all;
}
.calc-container .screen-one,
.calc-container .screen-two {
  margin: 0.2rem 1.8rem;
  width: auto;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calc-container .screen-one {
  font-size: 15px;
  opacity: 0.5;
}
.calc-container .screen-two {
  font-size: 1.4rem;
}
.calc-container .button-container {
  min-height: 40vh;
  width: 90%;
  background: var(--keypad_toggle_Background);
  border-radius: 10px;
  margin: 1rem auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 1.5rem;
  grid-gap: 1rem;
  text-align: center;
}
.calc-container .button-container .button,
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete,
.calc-container .button-container .operation {
  border-radius: 10px;
  outline: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  background: var(--normalKeyBackground);
  box-shadow: 0 5px var(--normalKeyShadow);
  /* ADD THIS */
  padding-top: 5px;
}
.calc-container .button-container .reset,
.calc-container .button-container .delete {
  background: var(--removeKeyBackground);
  color: var(--delResetColorText) !important;
  box-shadow: 0 5px var(--removeKeyShadow);
}
.calc-container .button-container .reset:hover,
.calc-container .button-container .delete:hover {
  transform: translateY(5px);
  box-shadow: none;
}
.calc-container .button-container .equal {
  background: var(--equal_toggle_KeyBackground);
  box-shadow: 0 5px var(--equalKeyShadow);
  color: var(--equalColorText) !important;
}
.calc-container .button-container .equal:hover {
  transform: translateY(5px);
  box-shadow: none;
}
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete {
  color: var(--default);
}
.calc-container .button-container .button,
.calc-container .button-container .operation {
  color: var(--normalKeyText);
}
.calc-container .button-container .button:hover,
.calc-container .button-container .operation:hover {
  transform: translateY(5px);
  box-shadow: none;
}
.calc-container .button-container .reset {
  grid-column: 1/3;
}
.calc-container .button-container .equal {
  grid-column: 3/5;
}

p {
  position: absolute;
  left: 50%;
  bottom: 1%;
  color: white;
  font-size: 12px;
  transform: translate(-50%, 0);
}
p span {
  text-decoration: underline;
}

@media screen and (max-width: 1100px) {
  .calc-container {
    transform: translate(-50%, 0);
  }

  .button-container {
    width: 300px !important;
  }

  .screen {
    width: 300px !important;
  }

  header {
    width: 300px !important;
  }

  p {
    text-align: center;
    width: 80%;
  }
}
@media screen and (max-width: 375px) {
  .calc-container {
    transform: translate(-90%, -15%) !important;
  }

  input {
    -webkit-appearance: none;
    background: var(--equal_toggle_KeyBackground);
  }

  p {
    text-align: center;
    width: 60%;
  }

  header {
    width: 300px !important;
  }
}

/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />
    <link rel="stylesheet" href="./css/style.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Spartan:wght@700&display=swap"
      rel="stylesheet"
    />

    <script src="./script.js" defer></script>
    <title>Frontend Mentor | Calculator app</title>
  </head>
  <body>
    <main id="main">
      <div class="calc-container">
        <header>
          <h1>calc</h1>

          <div class="theme-toggler">
            <h2>THEME</h2>

            <div>
              <div class="label-container">
                <label for="input1" class="label">1</label>
                <label for="input2" class="label">2</label>
                <label for="input3" class="label">3</label>
              </div>
              <div class="input-container">
                <input id="input1" class="input" type="radio" name="theme" />
                <input id="input2" class="input" type="radio" name="theme" />
                <input id="input3" class="input" type="radio" name="theme" />
              </div>
            </div>
          </div>
        </header>

        <div class="screen">
          <div class="screen-one"></div>
          <div class="screen-two"></div>
        </div>
        <div class="button-container">
          <button class="button">7</button>
          <button class="button">8</button>
          <button class="button">9</button>
          <button class="delete">DEL</button>
          <button class="button">4</button>
          <button class="button">5</button>
          <button class="button">6</button>
          <button class="operation">+</button>
          <button class="button">1</button>
          <button class="button">2</button>
          <button class="button">3</button>
          <button class="operation">-</button>
          <button class="button">.</button>
          <button class="button">0</button>
          <button class="operation">/</button>
          <button class="operation">x</button>
          <button class="reset">RESET</button>
          <button class="equal">=</button>
        </div>
      </div>
    </main>

    <p>
      Challenge by <span>Frontend Mentor</span>. Coded by
      <span>Adrian397</span>.
    </p>
  </body>
</html>

Upvotes: 0

isherwood
isherwood

Reputation: 61114

The usual issue is line-height. Since no numbers have descenders that's not apparent. I'd probably just add a span to contain the text and translate them down.

let input1 = document.getElementById("input1");
let input2 = document.getElementById("input2");
let input3 = document.getElementById("input3");
let main = document.getElementById("main");

input1.checked = true;

function setColorTheme() {
  if (input1.checked == true) {
    main.classList.add("dark");
  } else {
    main.classList.remove("dark");
  }
  if (input2.checked == true) {
    main.classList.add("light");
  } else {
    main.classList.remove("light");
  }
  if (input3.checked == true) {
    main.classList.add("saturated");
  } else {
    main.classList.remove("saturated");
  }
}

setColorTheme();

document.querySelectorAll('input[name="theme"]').forEach((e) => {
  e.addEventListener("change", setColorTheme);
});
button>span {
  transform: translateY(3px);
  display: inline-block;
}

.dark {
  --mainBackground: hsl(222, 26%, 31%);
  --keypad_toggle_Background: hsl(223, 31%, 20%);
  --screenBackground: hsl(224, 36%, 15%);
  --removeKeyBackground: hsl(225, 21%, 49%);
  --removeKeyShadow: hsl(224, 28%, 35%);
  --equal_toggle_KeyBackground: hsl(6, 63%, 50%);
  --equalKeyShadow: hsl(6, 70%, 34%);
  --normalKeyBackground: hsl(30, 25%, 89%);
  --normalKeyShadow: hsl(28, 16%, 65%);
  --normalKeyText: hsl(221, 14%, 31%);
  --default: hsl(0, 0%, 100%);
  --equalColorText: hsl(0, 0%, 100%);
  --delResetColorText: hsl(0, 0%, 100%);
}

.light {
  --mainBackground: hsl(0, 0%, 90%);
  --keypad_toggle_Background: hsl(0, 5%, 81%);
  --screenBackground: hsl(0, 0%, 93%);
  --removeKeyBackground: hsl(185, 42%, 37%);
  --removeKeyShadow: hsl(185, 58%, 25%);
  --equal_toggle_KeyBackground: hsl(25, 98%, 40%);
  --equalKeyShadow: hsl(25, 99%, 27%);
  --normalKeyBackground: hsl(45, 7%, 89%);
  --normalKeyShadow: hsl(28, 16%, 65%);
  --normalKeyText: hsl(60, 10%, 19%);
  --default: hsl(0, 0%, 0%);
  --equalColorText: hsl(0, 0%, 100%);
  --delResetColorText: hsl(0, 0%, 100%);
}

.saturated {
  --mainBackground: hsl(268, 75%, 9%);
  --keypad_toggle_Background: hsl(268, 71%, 12%);
  --screenBackground: hsl(268, 71%, 12%);
  --removeKeyBackground: hsl(281, 89%, 26%);
  --removeKeyShadow: hsl(285, 91%, 52%);
  --equal_toggle_KeyBackground: hsl(176, 100%, 44%);
  --equalKeyShadow: hsl(177, 92%, 70%);
  --normalKeyBackground: hsl(268, 47%, 21%);
  --normalKeyShadow: hsl(290, 70%, 36%);
  --normalKeyText: hsl(52, 100%, 62%);
  --default: hsl(52, 100%, 62%);
  --equalColorText: hsl(198, 20%, 13%);
  --delResetColorText: hsl(0, 0%, 100%);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Spartan", sans-serif;
}

main {
  background: var(--mainBackground);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--default);
}

.calc-container {
  min-height: 55vh;
  width: 28%;
}

.calc-container header {
  display: flex;
  min-height: 10vh;
  width: 90%;
  margin: auto;
  align-items: center;
  justify-content: space-between;
}

.calc-container header .theme-toggler {
  display: flex;
  margin-bottom: 0.8rem;
}

.calc-container header .theme-toggler h2 {
  font-size: 12px;
  align-self: flex-end;
  margin-right: 1rem;
}

.calc-container header .theme-toggler .label-container {
  display: flex;
  justify-content: space-evenly;
  text-align: center;
}

.calc-container header .theme-toggler .label-container .label {
  margin: 0rem 0.35rem;
}

.calc-container header .theme-toggler .input-container {
  width: 60px;
  height: 20px;
  border-radius: 10px;
  background: var(--keypad_toggle_Background);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.calc-container header .theme-toggler .input-container .input {
  appearance: none;
  background: var(--equal_toggle_KeyBackground);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  opacity: 0;
  cursor: pointer;
}

.calc-container header .theme-toggler .input-container .input:checked {
  opacity: 1;
}

.calc-container .screen {
  min-height: 10vh;
  width: 90%;
  background: var(--screenBackground);
  margin: auto;
  border-radius: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
  word-wrap: break-word;
  word-break: break-all;
}

.calc-container .screen-one,
.calc-container .screen-two {
  margin: 0.2rem 1.8rem;
  width: auto;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calc-container .screen-one {
  font-size: 15px;
  opacity: 0.5;
}

.calc-container .screen-two {
  font-size: 1.4rem;
}

.calc-container .button-container {
  min-height: 40vh;
  width: 90%;
  background: var(--keypad_toggle_Background);
  border-radius: 10px;
  margin: 1rem auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 1.5rem;
  grid-gap: 1rem;
  text-align: center;
}

.calc-container .button-container .button,
.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete,
.calc-container .button-container .operation {
  border-radius: 10px;
  outline: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  background: var(--normalKeyBackground);
  box-shadow: 0 5px var(--normalKeyShadow);
}

.calc-container .button-container .reset,
.calc-container .button-container .delete {
  background: var(--removeKeyBackground);
  color: var(--delResetColorText) !important;
  box-shadow: 0 5px var(--removeKeyShadow);
}

.calc-container .button-container .reset:hover,
.calc-container .button-container .delete:hover {
  transform: translateY(5px);
  box-shadow: none;
}

.calc-container .button-container .equal {
  background: var(--equal_toggle_KeyBackground);
  box-shadow: 0 5px var(--equalKeyShadow);
  color: var(--equalColorText) !important;
}

.calc-container .button-container .equal:hover {
  transform: translateY(5px);
  box-shadow: none;
}

.calc-container .button-container .reset,
.calc-container .button-container .equal,
.calc-container .button-container .delete {
  color: var(--default);
}

.calc-container .button-container .button,
.calc-container .button-container .operation {
  color: var(--normalKeyText);
}

.calc-container .button-container .button:hover,
.calc-container .button-container .operation:hover {
  transform: translateY(5px);
  box-shadow: none;
}

.calc-container .button-container .reset {
  grid-column: 1/3;
}

.calc-container .button-container .equal {
  grid-column: 3/5;
}

p {
  position: absolute;
  left: 50%;
  bottom: 1%;
  color: white;
  font-size: 12px;
  transform: translate(-50%, 0);
}

p span {
  text-decoration: underline;
}

@media screen and (max-width: 1100px) {
  .calc-container {
    transform: translate(-50%, 0);
  }
  .button-container {
    width: 300px !important;
  }
  .screen {
    width: 300px !important;
  }
  header {
    width: 300px !important;
  }
  p {
    text-align: center;
    width: 80%;
  }
}

@media screen and (max-width: 375px) {
  .calc-container {
    transform: translate(-90%, -15%) !important;
  }
  input {
    -webkit-appearance: none;
    background: var(--equal_toggle_KeyBackground);
  }
  p {
    text-align: center;
    width: 60%;
  }
  header {
    width: 300px !important;
  }
}


/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
  <link rel="stylesheet" href="./css/style.css" />
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link href="https://fonts.googleapis.com/css2?family=Spartan:wght@700&display=swap" rel="stylesheet" />

  <script src="./script.js" defer></script>
  <title>Frontend Mentor | Calculator app</title>
</head>

<body>
  <main id="main">
    <div class="calc-container">
      <header>
        <h1>calc</h1>

        <div class="theme-toggler">
          <h2>THEME</h2>

          <div>
            <div class="label-container">
              <label for="input1" class="label">1</label>
              <label for="input2" class="label">2</label>
              <label for="input3" class="label">3</label>
            </div>
            <div class="input-container">
              <input id="input1" class="input" type="radio" name="theme" />
              <input id="input2" class="input" type="radio" name="theme" />
              <input id="input3" class="input" type="radio" name="theme" />
            </div>
          </div>
        </div>
      </header>

      <div class="screen">
        <div class="screen-one"></div>
        <div class="screen-two"></div>
      </div>
      <div class="button-container">
        <button class="button"><span>7</span></button>
        <button class="button"><span>8</span></button>
        <button class="button"><span>9</span></button>
        <button class="delete"><span>DEL</span></button>
        <button class="button"><span>4</span></button>
        <button class="button"><span>5</span></button>
        <button class="button"><span>6</span></button>
        <button class="operation"><span>+</span></button>
        <button class="button"><span>1</span></button>
        <button class="button"><span>2</span></button>
        <button class="button"><span>3</span></button>
        <button class="operation"><span>-</span></button>
        <button class="button"><span>.</span></button>
        <button class="button"><span>0</span></button>
        <button class="operation"><span>/</span></button>
        <button class="operation"><span>x</span></button>
        <button class="reset"><span>RESET</span></button>
        <button class="equal"><span>=</span></button>
      </div>
    </div>
  </main>

  <p>
    Challenge by <span>Frontend Mentor</span>. Coded by
    <span>Adrian397</span>.
  </p>
</body>

</html>

Upvotes: 1

Related Questions